Google-maps – Google Map API V3: How to add Custom data to markers

google mapsgoogle-maps-api-3google-maps-markers

Is there a way I can add some custom information to my markers for later use. There are ways to have an info-window and a title, but what If I want to associate the marker with other information.

I have other stuff being displayed on the page that depends on the markers so when a marker is click the content on the page has to change depending upon which marker was clicked.I would like store and retrieve the custom data once a marker is lets say clicked etc.

Thanks

Best Answer

As a Google Marker is a JavaScript object, you may add custom information in the form key: value, where key is a valid string. They are called object properties and can be approached in many different ways. The value can be anything legal, as simple as numbers or strings, and also functions, or even other objects. Three simple ways: in the declaration, dot notation and square brackets

var markerA = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0, 0),
    customInfo: "Marker A"
});

var markerB = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-10, 0)
});
markerB.customInfo = "Marker B";

var markerC = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-20, 0)
});
markerC['customInfo'] = "Marker C";

Then to retrieve it in a similar manner:

google.maps.event.addListener(markerA, 'click', function() {
    alert(this.customInfo);
});
Related Topic