I need to show a map with multiple markers, Ive found this question which has what I am looking for but the problem is I need to show the marker of each item next to it.

<c:forEach var="product" items="products">
   ${product.name}
</c:forEach>

I also checked the answer of this question but did not help much.

Google Map Code

var pinColor = "FE7569";
var marker, i;

var address=[];
address[0] = "New york";
address[1] = "las vegas";
address[2] = "san francisco";
address[3] = "chicago";

// Set default map center location
var latlng = new google.maps.LatLng(latcenter,longcenter);

// Create pinShadow for each marker 
var pinShadow = new google.maps.MarkerImage("        /chart?chst=d_map_pin_shadow",
    new google.maps.Size(40, 37),
    new google.maps.Point(0, 0),
    new google.maps.Point(12, 35));

// Function to create the dynamic marker
function pinImage(i){
    return image = new google.maps.MarkerImage("/"+i+"/"+pinColor+"/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34));
}

// Function to run once page has loaded
    function initialize(){     
   var geocoder=new google.maps.Geocoder(); 
// Set Default settigns for google map
var settings = {
    zoom: 3,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP};

// Start Google Maps and assign it to div on site
var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 
// loop though total numner of address in array
for (var i = 0; i < address.length; i++) {  
   (function(i) {

    // Use geocoder to grab latlong for user inputed address
    geocoder.geocode( { 'address': address[i]}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            // Redefine map center location
            if (i == 1){ map.setCenter(results[0].geometry.location); }

            // Create dynamic markers on map as per the address array
            var marker = new google.maps.Marker({
                map: map, 
                position: results[0].geometry.location,
                title:address[i],
                zIndex: i,
                // PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..??  
                icon: pinImage(i),
                shadow: pinShadow
            });         
        }
       });
     })(i);
    }
    }
google.maps.event.addDomListener(window, 'load', initialize)

Desirable output is similar to following image, each result has a named marker and its location is shown by its associated marker on the map. I need markers to be alphabetical not numbered also based on coordinate not address.

I need to show a map with multiple markers, Ive found this question which has what I am looking for but the problem is I need to show the marker of each item next to it.

<c:forEach var="product" items="products">
   ${product.name}
</c:forEach>

I also checked the answer of this question but did not help much.

Google Map Code

var pinColor = "FE7569";
var marker, i;

var address=[];
address[0] = "New york";
address[1] = "las vegas";
address[2] = "san francisco";
address[3] = "chicago";

// Set default map center location
var latlng = new google.maps.LatLng(latcenter,longcenter);

// Create pinShadow for each marker 
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.        /chart?chst=d_map_pin_shadow",
    new google.maps.Size(40, 37),
    new google.maps.Point(0, 0),
    new google.maps.Point(12, 35));

// Function to create the dynamic marker
function pinImage(i){
    return image = new google.maps.MarkerImage("http://www.googlemapsmarkers./v1/"+i+"/"+pinColor+"/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34));
}

// Function to run once page has loaded
    function initialize(){     
   var geocoder=new google.maps.Geocoder(); 
// Set Default settigns for google map
var settings = {
    zoom: 3,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP};

// Start Google Maps and assign it to div on site
var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 
// loop though total numner of address in array
for (var i = 0; i < address.length; i++) {  
   (function(i) {

    // Use geocoder to grab latlong for user inputed address
    geocoder.geocode( { 'address': address[i]}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            // Redefine map center location
            if (i == 1){ map.setCenter(results[0].geometry.location); }

            // Create dynamic markers on map as per the address array
            var marker = new google.maps.Marker({
                map: map, 
                position: results[0].geometry.location,
                title:address[i],
                zIndex: i,
                // PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..??  
                icon: pinImage(i),
                shadow: pinShadow
            });         
        }
       });
     })(i);
    }
    }
google.maps.event.addDomListener(window, 'load', initialize)

Desirable output is similar to following image, each result has a named marker and its location is shown by its associated marker on the map. I need markers to be alphabetical not numbered also based on coordinate not address.

• javascript
• jquery
• google-maps
• jsp
• google-maps-api-3

• Which part is not working? The JSP or Javascript part? – Jeroen Commented May 1, 2015 at 12:20
• @Jeroen I do not know how to add the marker next to each product name – Daniel Newtown Commented May 2, 2015 at 0:32

2 Answers 2

EDIT: Changed the snippet to get the marker image from chart.apis.google.. (I'm not sure why googlemapsmarkers. stopped working).

You can get the url from the marker, and display it as an image. Here is a code snippet to illustrate:

<!DOCTYPE html>

<head lang="en">
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maps.googleapis./maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
  <style>
    #map-canvas,
    #marker-container {
      width: 50%;
      height: 600px;
      margin: 0px;
      padding: 0px;
      float: left;
    }
    .marker-description {
      padding-left: 40px;
    }
    .place {
      padding-left: 10px;
    }
    .marker {
      display: inline-block;
      width: 21px;
      height: 35px;
    }
  </style>
</head>

<body>
  <div id="map-canvas"></div>
  <div id="marker-container"></div>
  <script>
    var map;
    var markers = [];
    var pinColor = "FE7569";

     // Function to create the dynamic marker
    function pinImage(imagenum) {
      // should check for more than 32 pins...
      var ch = 'A'
      var makerLetter = String.fromCharCode(ch.charCodeAt(0) + imagenum);
      return image = new google.maps.MarkerImage("http://chart.apis.google./chart?chst=d_map_pin_letter&chld=" + makerLetter + "|" + pinColor);
    }

    function initialize() {

      var newYork = new google.maps.LatLng(40.7773514, -73.9554338);
      var mapOptions = {
        zoom: 13,
        center: newYork,
        disableDefaultUI: true,
        mapTypeControlOptions: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      var request = {
        location: newYork,
        radius: 5000,
        types: ['store']
      };
      var service = new google.maps.places.PlacesService(map);
      service.nearbySearch(request, callback);
    }

    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0, marker; marker = markers[i]; i++) {
          marker.setMap(null);
        }
        markers = [];
        $("#marker-container").empty();
        for (i = 0; i < results.length; i++) {
          var place = results[i];
          var placeLoc = place.geometry.location;
          // Create a marker for each place.
          var marker = new google.maps.Marker({
            map: map,
            title: place.name,
            position: place.geometry.location,
            icon: pinImage(i)
          });

          markers.push(marker);
          var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>" + place.name + "</span>");
          $("#marker-container").append(description);
        }
      }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</body>

</html>

It sounds like you want letters instead of numbers inside your pin:

// Function to create the dynamic marker
function pinImage(i) {
    var letter = String.fromCharCode(i + 65);  // 'A' is 65.
    return new google.maps.MarkerImage(
        "http://www.googlemapsmarkers./v1/" + letter + "/" + pinColor + "/",
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
}

Also, you need to create objects that keep track of the address, latlng, and index of each of your markers. I suggest you use map.data to do this. https://developers.google./maps/documentation/javascript/reference#Data

var addresses = ['New York', 'San Francisco'];
addresses.forEach(function(address, i) {
    // Create a feature.
    var feature = map.data.add({
        'id': i,
        'properties': {'address': address}
    });

    // Display the feature in the list.
    $('.address-list').append($('<div>')
        .append($('<img>').attr('src', pinImage(i)))
        .append($('<div>').text(address)));
    // Do more fancy things here

    // Geocode the feature and position it on the map.
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            feature.setGeometry(results[0].geometry.location);
            if (i == 0) {
                map.setCenter(results[0].geometry.location);
            }
        }
    });
});

Then you can control the display of the markers like this:

map.data.setStyle(function(feature) {
    return {
        title: feature.getProperty('address'),
        zIndex: feature.getId(),
        icon: pinImage(feature.getId()),
        shadow: pinShadow
    };
});