CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-markers
gargantuan
gargantuan

Reputation: 8944

Is there a way to identify which Google Map Marker has been clicked?

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.

Upvotes: 5

Views: 2757

Answers (4)

Jaco
Jaco

Reputation: 247

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

Upvotes: 1

gargantuan
gargantuan

Reputation: 8944

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 comments

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

Upvotes: 0

Chris B
Chris B

Reputation: 15834

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.

Upvotes: 5

Oli
Oli

Reputation: 239810

Simple as pie.

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

Upvotes: -2

Related Questions