Multiple Markers for Google Maps API V3 With Custom Icon

Question

I'm having problems with making multiple markers appear on my Google Map. I've been trying stuff from all over the internet but most of the time the map just breaks.

EDIT: I managed to get the multiple markers going. I now only need to add the info windows to each.

My updated code is as follows:

<script type="text/javascript">
function initialize() {
latLngs = [ 
    new google.maps.LatLng(44.3118328, -79.5549532),
    new google.maps.LatLng(44.3118325, -80.5549533),
    new google.maps.LatLng(44.3118326, -81.5549534),
    new google.maps.LatLng(44.3118327, -82.5549535)
    ];

var latlng = new google.maps.LatLng(44.3118328, -79.5549532);
var myOptions = {
  zoom: 15,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};


var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);


var contentString = '<div id="mapinfowindow">'+'1970 Thompson St <br> Innisfil' + '<br>' + '$329,900'
+'<a href="http://www.something.com/Featured_Listings_files/1970%20Thompson%20-%20Brochure.pdf"><br><br>View Brochure</a></div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString,
});

      var image = new google.maps.MarkerImage(
'images/marker.png',
new google.maps.Size(50,50),
new google.maps.Point(0,0),
new google.maps.Point(25,50)
);

var shadow = new google.maps.MarkerImage(
'images/markershadow.png',
new google.maps.Size(78,50),
new google.maps.Point(0,0),
new google.maps.Point(25,50)
);

var shape = {
coord: [28,3,32,4,35,5,37,6,38,7,39,8,40,9,42,10,42,11,43,12,44,13,44,14,44,15,45,16,45,17,45,18,45,19,45,20,45,21,45,22,45,23,44,24,44,25,44,26,43,27,43,28,42,29,41,30,41,31,40,32,39,33,39,34,38,35,37,36,36,37,35,38,34,39,33,40,32,41,31,42,30,43,29,44,28,45,26,46,24,47,24,47,22,46,21,45,19,44,18,43,17,42,16,41,15,40,14,39,13,38,12,37,12,36,11,35,10,34,9,33,9,32,8,31,7,30,7,29,6,28,5,27,5,26,4,25,4,24,4,23,4,22,3,21,3,20,3,19,3,18,4,17,4,16,4,15,4,14,5,13,6,12,6,11,7,10,8,9,9,8,10,7,12,6,14,5,16,4,20,3,28,3],
type: 'poly'
};


var markers = new Array(latLngs.length);

for (var i = 0; i < markers.length; i++) {
 markers[i] = new google.maps.Marker({
    position: latLngs[i],
    title:"Marker "+i,
    icon: image,
    shadow: shadow,
    map: map,
    shape: shape
});
markers[i].setMap(map);     
}

for (var i2 = 0; i2 < markers.length; i2++) {
    google.maps.event.addListener(markers[i2], 'click', function() {
    infowindow.open(map,markers[i2]);
    });
}

}

I now need to add the info windows to each marker each with its unique content inside the window.

Thank you for your time.

Trott · Accepted Answer · 2013-12-15T03:41:18.793

2

Let's say you have an array of LatLng objects call latLngs and that you wanted a marker for each of those objects. You might do it something like this (taking the tail end of your code in your question and modifying it):

var markers = new Array(latLngs.length);
for (var i = 0; i < markers.length; i++) {
    markers[i] = new google.maps.Marker({
        position: latLngs[i],
        title:"Marker "+i,
        icon: image,
        shadow: shadow,
        map: map,
        shape: shape
    });
    markers[i].setMap(map);
}

The main thing is that you can't reuse your marker variable. You need to use a different variable for each marker, hence the array.

edited Dec 15 '13 at 03:41

answered Jul 04 '11 at 20:08

Trott

66,479
23
173
212

Thank you! Much appreciated! I will try it and let you know how I fare with it. – Leo Jul 05 '11 at 05:39
Hi again. I managed to add multiple markers by using the code you gave and creating an array for the markers. Now the only thing I need to do is to add info windows to each. I can't seem to add event listeners to the markers. I used the following code: `for (var i2 = 0; i2 < markers.length; i2++) { google.maps.event.addListener(markers[i2], 'click', function() { infowindow.open(map,markers[i2]); }); }` outside of the original for loop for the multiple markers. Thank you for your time. – Leo Jul 05 '11 at 06:15
Use an array of InfoWindow objects rather than reusing the `infowindow` variable. – Trott Jul 05 '11 at 23:52
Thank you! :) I would have voted it up but the page says I need more rep. Thanks again! – Leo Jul 06 '11 at 05:41

score 1 · Answer 2 · edited May 23 '17 at 11:56

Looks like the OP was able to use Trott's solution, but I couldn't get it to work myself. I found something else that is perhaps simpler and works for me right here. To summarize, wrap the addlistener call in your own function and then call that function from within your loop (wherever you are looping through data or markers). My function is simply...

function listenInfoWindows(marker, infowindow) {
  google.maps.event.addListener(marker, 'click', function(){
      infowindow.open(map, marker); 
    }
  );
}

Multiple Markers for Google Maps API V3 With Custom Icon

2 Answers2

Linked