Question

I am having trouble with my Google Maps web app, i am trying to add markers to a map and then when the user clicks on that marker, the name of marker appears.

I store information about each marker in an array like so:

var citymap = {};
      citymap['edinburgh'] = {
        center: new google.maps.LatLng(55.934120, -3.226569),
        population: 284,
        image:clueImage,
        color: '#ff0000',
        elementId:'clue1'
      };
       citymap['clue2'] = {
        center: new google.maps.LatLng(55.970783, -3.164594),
        population: 284,
        image:clueImage,
        color: '#ff0000',
        elementId:'clue2'
      }
         citymap['clue4'] = {
        center: new google.maps.LatLng(55.939583, -3.202092),
        population: 284,
        image:clueImage,
        color: '#ff0000',
        elementId:'clue3'
      }
         citymap['clue9'] = {
        center: new google.maps.LatLng(0, 0),
        population: 284,
        image:clueImage,
        color: '#ff0000',
        elementId:'clue1'
      }

I then loop through the array and add the marker to the map:

for (var city in citymap) {

       var playerMarker = new google.maps.Marker({
      position: citymap[city].center,
      map: map,
      icon: citymap[city].image
      });

      google.maps.event.addListener(playerMarker, "click", function() {
      var elementConnected = citymap[city].elementId;
     console.log(elementConnected);
    });

        }

Everything works as intended, however when I click on any of the markers, they all log the value of the last marker in the array. I know this is because thats where the loop finished, but I can not think of a way of making this work.

Help would be very helpful!

Answer 1

I think this is the universal “closure” problem in Javascript that people have. Someone might give a better way of doing this, but I think you need something like this:

google.maps.event.addListener(playerMarker, "click", (function() {
    return function () {
        var elementConnected = citymap[city].elementId;
        console.log(elementConnected);
    };
})(city));

Or if possible, depending on what else you’re doing inside the click event, maybe this:

google.maps.event.addListener(playerMarker, "click", (function(elementId) {
    return function () {
        var elementConnected = elementId;
        console.log(elementConnected);
    };
})(citymap[city].elementId));