you.arenot.me


Google Maps API v3 – Multiple Markers, Multiple Infowindows

Like many of you out there that use Google Maps, when v3.0 of it came out you jumped at the chance to use it!  But I couldn’t get the multiple markers, multiple info windows to work, no matter what I found on Google’s site.

Searching got me to this blog:

http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows

And it states this guy is writing a book on this very subject.  So this should have the answer.  Well bollocks it did!  Stop writing your book now matey!

The Problem

When in a loop adding new markers many of you have probably done something similar:

for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
var infowindow = new google.maps.InfoWindow({
content: "holding..."
});

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

This always showed the last marker that was bound to map so the info window always appeared on the last marker. Bit of a problem really.

After reading http://www.svennerberg.com/2010/04/the-state-of-this-blog/ it showed me my mistake and the actual solution…

The Solution

var infowindow = null;
.
.
.
/* now inside your initialise function */
infowindow = new google.maps.InfoWindow({
content: "holding..."
});

for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
google.maps.event.addListener(marker, 'click', function () {
// where I have added .html to the marker object.
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}

Notice the change from marker to this. As you have all seen the event fires for each marker, but as you were calling infowindow.open(map, marker) javascript engine’s memory location thingymabob (not good with names) held the last reference to marker. But you had passed in the marker to the event, so by calling this in place of marker, you get what you are looking for.

Hope this helps someone out.

[Edit]

And to auto center your map once all your points are in:

function AutoCenter() {
//  Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
//  Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
//  Fit these bounds to the map
map.fitBounds(bounds);
}

assuming you have saved each marker in a markers array, and map is a global variable on your page.

[Edit 2]

To help someone below in the comments, I created this map to help solve someone’s issue.  Hopefully it did.  I really should have had a full working example at the start but I can be quite lazy sometimes :S  It’s done now, so you can stop complaining ;)

[Edit 3]

Updated the code so that the infowindow was on the outside of the loop.  It doesn’t need to be inside the loop.

[Edit 4]
Demo of map working with v3 of Google Maps

259 Responses to “Google Maps API v3 – Multiple Markers, Multiple Infowindows”

  1. Nalaka says:

    Thanks a lot for the post,

    I have one question though. Just like you showed the content at each marker, how can we show different contents for each marker in the for loop?

    Thank You.

  2. bre says:

    Thanks a lot,
    finally I found the right tutorial.

  3. Burak says:

    Thank you, really helped a lot!

  4. om says:

    This always showed the last marker that was bound to map so the info window always appeared on the last marker

    window.onload = function () {
    var mapOptions = {
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById(“dvMap”), mapOptions);

    var infoWindow = new google.maps.InfoWindow();

    for (i = 1; i <= markers.length; i++) {
    var data = markers[i-1]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);

    var marker = new MarkerWithLabel({
    position: myLatlng,
    map: map,
    draggable: true,
    raiseOnDrag: true,
    labelContent: i, // your number
    icon: "img/your_icon.png",
    labelAnchor: new google.maps.Point(3, 30),
    labelClass: "labels", // the CSS class for the label
    labelInBackground: false
    });

    (function (marker, data) {
    google.maps.event.addListener(marker, "click", function (e) {

    infoWindow.setContent("User :"+data.title+"Time:”+data.description+”Lng:”+data.lng+”Lat:”+data.lat);
    infoWindow.open(map, marker);
    });

    })(marker, data);

    }
    }

  5. var markers = []; // define empty array variable

    function initialize() {

    bottom line :

    for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map); //********************** All List Show :)
    }

    }

    // Add a marker to the map and push to the array.
    function addMarker(location) {
    var marker = new google.maps.Marker({
    position: location,
    map: map
    });
    markers.push(marker); //************************* Markers Araylist
    }

  6. Dav says:

    Thank u very much !!!

  7. The dude says:

    Hey, thanks for the tip. I didn’t know I have to use “this” inside “addListener”.

  8. ما says:

    خارطة‏ ‏العراق

  9. Francine says:

    Hello guys if you can’t earn any money online try –
    bluehand roulette system – it earns me extra money everyday, just google it