Google Maps & jQuery InfoWindow Replacement

Question

So I'm rewriting my first google maps app and I'm looking at how I create info windows on click of a marker and it seems very inefficent to be adding a listener for each. Previously I've used GInfoWindow and EBubble ( http://econym.org.uk/gmap/ebubble.htm ).

I was thinking that I could use jQuery to show a div with dynamic data if I had a hook for each marker to show the window and relevant marker info (pulled from JSON). I can see each marker has a unique id (eg mtgt_unnamed_2822) but I'm not sure how to predicte this.

Has anyone tried this before or know how to go about it?

Thanks Denis

Answer 1

I don't know jQuery, but Javascript allows you to add your own custom Properties to any Object. So you can write stuff like this:

  var marker = new GMarker(...);  
  marker.ID = "mtgt_unnamed_2822";

or

function createMarker(point,newid) {
  var marker = new GMarker(point);
  marker.ID = newid;
  ...
}

Be careful not to use "marker.id" because the API could use "id" as the obfuscated internal name for an existing property in some future release. In fact avoid Property names that start with a lower case letter.

Once you've attached the .ID Property to a marker, you can read the info from the marker.ID of any marker reference whenever you need it to make the jQuery call.