The follwoing code loops over a json object to place marker on a google map. Which works fine.

function displayMarkers(data){
    for(var i = 0; i < data.Lat.length; i++){
        var point = new GLatLng(data.Lat[i],data.Lng[i]);
        marker = new GMarker(point);
        map.addOverlay(marker);

            // here's the problem
        GEvent.addListener(marker, "click", function(){
            alert(data.Name[i]);
        });
    }
}

The problem is, every marker always responds with the last value of "i". I'm stuck trying to figure out a way to identify the marker that has been clicked to somehow get the right information from the data object.

I'm thinking about creating an array of markers at creation to loop through based on the markers location, but that feels really inefficient to me.

Any help, as always, greatly appreciated.

The follwoing code loops over a json object to place marker on a google map. Which works fine.

function displayMarkers(data){
    for(var i = 0; i < data.Lat.length; i++){
        var point = new GLatLng(data.Lat[i],data.Lng[i]);
        marker = new GMarker(point);
        map.addOverlay(marker);

            // here's the problem
        GEvent.addListener(marker, "click", function(){
            alert(data.Name[i]);
        });
    }
}

The problem is, every marker always responds with the last value of "i". I'm stuck trying to figure out a way to identify the marker that has been clicked to somehow get the right information from the data object.

I'm thinking about creating an array of markers at creation to loop through based on the markers location, but that feels really inefficient to me.

Any help, as always, greatly appreciated.

• javascript
• google-maps
• google-maps-markers

4 Answers 4

The click event for the map passes three different elements.

GEvent.addListener(map, "click", function(overlay, latlng, overlaylatlng) {
  // overlay = GOverlay or null
  // latlng = GLatLng
  // overlaylatlng = GLatLng or null
});

If the user did not click on an overlay, 'overlay' and 'overlaylatlng' will be null.

Update: You have to add the listener to the map (not the marker) if you want to get a GOverlay out of it. The click event for a GMarker only returns the GLatLng.

The Map supports an onTap event, which passes the index of the marker which was selected, please refer to this example:

It seems that the above solutions only return the coordinates of the marker, which doesn't solve my problem. Perhaps I'm doing something wrong.

However, the way I solved it was to simply add a property to the marker like this

function createMarker(latlng,name) {
      var marker = new GMarker(latlng);

      // HERE WE GO
      marker.value = name;

      GEvent.addListener(marker,"click", function() {
        addToList(this.value);
      });
      return marker;
}

UPDATE: The aboves solves it one way, but the easier way is to attach the event to the map as mentioned in the ments

GEvent.addListener(map, "click", function(marker, point){
    alert(marker);
});

Simple as pie.

    GEvent.addListener(marker, "click", function(o){
            alert(o);
    });