I'm currently making an ajax call to the server to get a list of lat/longs to be displayed on a google map. I've attached a "click" event to each marker as well. The trick is that I need to be able to store a little bit of extra data to the marker to know what ID( from the database ) that I'm dealing with so I match it back to the db later. I'm using the Title property to display some friendly info. The AJAX, Marker creation, and click event work fine. What's the right way to store the extra data for the marker? See code here:

$.ajax({
    url: "/location/NearbyHotspots",
    data: {
        lat: marker.position.lat(),
        lng: marker.position.lng(),
        radius: 10
    },
    datatype: "json",
    type: "POST",
    success: function (data, status, xhttp) {
        for (var i = 0; i < data.length; i++) {
            var loc = new google.maps.LatLng(data[i].Lat, data[i].Long);
            var newmarker = new google.maps.Marker({
                position: loc,
                draggable: false,
                map: map,
                title: data[i].Name
            });

            // This doesn't seem to work
            newmarker.hotspotid = data[i].ID;
            google.maps.event.addListener(newmarker, "click", function(mark) {
                alert(mark.hotspotid);
            });
        }
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(textStatus);
    }
});

I'm currently making an ajax call to the server to get a list of lat/longs to be displayed on a google map. I've attached a "click" event to each marker as well. The trick is that I need to be able to store a little bit of extra data to the marker to know what ID( from the database ) that I'm dealing with so I match it back to the db later. I'm using the Title property to display some friendly info. The AJAX, Marker creation, and click event work fine. What's the right way to store the extra data for the marker? See code here:

$.ajax({
    url: "/location/NearbyHotspots",
    data: {
        lat: marker.position.lat(),
        lng: marker.position.lng(),
        radius: 10
    },
    datatype: "json",
    type: "POST",
    success: function (data, status, xhttp) {
        for (var i = 0; i < data.length; i++) {
            var loc = new google.maps.LatLng(data[i].Lat, data[i].Long);
            var newmarker = new google.maps.Marker({
                position: loc,
                draggable: false,
                map: map,
                title: data[i].Name
            });

            // This doesn't seem to work
            newmarker.hotspotid = data[i].ID;
            google.maps.event.addListener(newmarker, "click", function(mark) {
                alert(mark.hotspotid);
            });
        }
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(textStatus);
    }
});

• javascript
• jquery
• ajax
• google-maps

2 Answers 2

HA! I figured it out. "this" did it!

google.maps.event.addListener(newmarker, "click", function(mark) {
    alert(this.hotspotid);
});  

I think your approach is right, it's just the event handler that's incorrect. In your handler

function(mark) {
    alert(mark.hotspotid);
}

The mark argument is not a marker, as you expect, but a MouseEvent (see the API reference for details).

In order to fix this, you need to use a closure to pass in the reference to the marker. This is complicated by the loop - you can't just use a reference to newmarker, as it will only ever refer to the last marker in the loop. There are a few different ways to fix this, but the easiest is to attach the click event in a separate function:

success: function (data, status, xhttp) {
    // define a function to attach the click event
    function attachClickEvent(marker) {
        google.maps.event.addListener(marker, "click", function() {
            // the reference to the marker will be saved in the closure
            alert(marker.hotspotid);
        });
    }
    for (var i = 0; i < data.length; i++) {
        var loc = new google.maps.LatLng(data[i].Lat, data[i].Long);
        var newmarker = new google.maps.Marker({
            position: loc,
            draggable: false,
            map: map,
            title: data[i].Name
        });

        newmarker.hotspotid = data[i].ID;
        attachClickEvent(newmarker);
    }
},