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.

Answer 1

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.