Question

Okay, so I realize I’m the 100th person asking a question about this, but even after researching and trying different things for days now, I can’t figure it out.
I have a function that will create markers on a google map. I will pass this function the coordinates as well as the HTML that will be displayed in the infoWindow that should be attached to each marker.

The problem that so many other people have is that even in my super simple example the content of the infoWindow is always the last content set for any infoWindow instead of the content set when creating a specific marker.

How can I fix this?

Here’s my code:

var somerandomcounter = 0;

function addMarkerNew(){
    markers[somerandomcounter] = new GMarker(new GLatLng(52.3666667+somerandomcounter,9.7166667+somerandomcounter),{title: somerandomcounter});
    map.addOverlay(markers[somerandomcounter]);

    var marker = markers[somerandomcounter];

    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml("<b>"+somerandomcounter+"</b>");   
    });

somerandomcounter++;
}

Answer 1

The issue here is variable scope. Let’s break it down:

// variable is in the global scope
var somerandomcounter = 0;

function addMarkerNew(){
    // now we're in the addMarkerNew() scope.
    // somerandomcounter still refers to the global scope variable
    // ... (some code elided)
    var marker = markers[somerandomcounter];

    GEvent.addListener(marker, "click", function() {
        // now we're in the click handler scope.
        // somerandomcounter *still* refers to the global scope variable.
        // When you increment the variable in the global scope,
        // the change will still be reflected here
        marker.openInfoWindowHtml("<b>"+somerandomcounter+"</b>");   
    });

    // increment the global scope variable
    somerandomcounter++;
}

The easiest way to fix this is to pass the somerandomcounter variable to one of the functions as an argument – this will keep the reference in the click handler pointing to the locally scoped variable. Here are two ways to do this:

1. Pass the counter as an argument to addMarkerNew:

   // variable is in the global scope
   var somerandomcounter = 0;
   
   function addMarkerNew(counter){
       // now we're in the addMarkerNew() scope.
       // counter is in the local scope
       // ...
       var marker = markers[counter];
   
       GEvent.addListener(marker, "click", function() {
           // now we're in the click handler scope.
           // counter *still* refers to the local addMarkerNew() variable
           marker.openInfoWindowHtml("<b>"+somerandomcounter+"</b>");   
       });
   }
   
   // call the function, incrementing the global variable as you do so
   addMarkerNew(somerandomcounter++);
   

2. Make a new function to attach the click handler, and pass the counter into that function:

   // variable is in the global scope
   var somerandomcounter = 0;
   
   // make a new function to attach the handler
   function attachClickHandler(marker, counter) {
       // now we're in the attachClickHandler() scope.
       // counter is a locally scope variable
       GEvent.addListener(marker, "click", function() {
           // now we're in the click handler scope.
           // counter refers to the local variable in 
           // the attachClickHandler() scope
           marker.openInfoWindowHtml("<b>"+counter+"</b>");
       });
   }
   
   function addMarkerNew(){
       // now we're in the addMarkerNew() scope.
       // somerandomcounter still refers to the global scope variable
       // ...
       var marker = markers[somerandomcounter];
   
       // attach the click handler
       attachClickHandler(marker, somerandomcounter)
   
       // increment the global scope variable
       somerandomcounter++;
   }