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:

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 () {, 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 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);, this);

Notice the change from marker to this. As you have all seen the event fires for each marker, but as you were calling, 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.


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) {
//  Fit these bounds to the map

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

257 thoughts on “Google Maps API v3 – Multiple Markers, Multiple Infowindows”

  1. 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. 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.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:”;, marker);

    })(marker, data);


  3. 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

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

Leave a Reply

Your email address will not be published.