How do I store more information in a marker?

Question

I'm using Google Maps v3 and I build in the server side a json collection of location data. So when I receive that, I iterate through that collection and create a marker object for each and every one of them.

For each of these markers, I bind them with the click event, so when the user clicks on a marker in the map, it displays an infoWindow with data related to the associated location.

I have an array to store all the location got from the server that holds the retrieved json objects and their corresponding marker.

The problem is that, even when I have an array that I can reference or iterate through, I need to not only get the marker object when the user clicks on them, but also the location object, that stores more information.

I tried to mantain this array of objects and reference it from the calling object without success, because the function is called by the marker and not the location object. So I thought if it's possible to store more information in the google maps marker object like using a general purpose field.

Please let me know if more information is needed.

Thanks!

Mathi

Answer 1

Yes you can, thanks to JavaScript. In this language, objects and hashtables are the same thing¹.

This is how you are creating your marker:

var point = new google.maps.LatLng(40.70, -74.00);
var myMarker = new google.maps.Marker({ position: point, map: map });

And this is how you can add an additional property to your myMarker object:

myMarker.myNewField = 100;

Voila! No need to hold separate arrays of related data. No need of a general purpose field. Simply invent a new property name, and you're good to go.

---

¹ A Survey of the JavaScript Programming Language by Douglas Crockford.

Combo

I'm not quite sure this is a good answer. What if your myNewField will collide with the attributes of google maps api, that may be added in the future? This is a hack that just works if you're lucky, not a clean, ultimate solution. – Predisposition

@Predisposition It's not a hack. Objects are hashmaps in JavaScript. The Google Maps API uses some keys of the hashmap. They could use others in future versions, but sticking to a specific version of the API should prevent such collisions. – Combo

Great answer, very helpful! But I would like to suggest an edit to your post (not enough reputation to do it myself). In the last paragraph, you're using the french word "viola" when you probably meant "voila". "Viola" is the past tense of the french verb for "raping"... It doesn't change anything to the quality of your answer, but I thought I might as well point it out! :) – Paulpaula

How use the new field when click event is fired? Thanks – Barmy

Answer 2

Correct way to set data in google map marker is

marker.set('data', 'hello world!');

Individually