Tuesday 15 March 2011

jquery ui map v3: programmatically open infowindow -


OK, I have a dynamic generated Google Map (using the jquery ui map v3 plugin).
What map data is shown depends on user input / selection.

I open the map like this:

  map_lat = parseFloat (xxxxxxxxxx); Map_long = Parse Flash (xxxxxxxxxxxx); Map_zoom = parseInt (xxxxxxxxxxxx); MyCenter = map_lat + "," + map_long; MyCenter = myCenter.toString (); . $ ("# My_map") width (600) .height (620); $ ("# My_map"). Gmap ({"center": myCenter, "zoom": map_zoom, "disableDefaultUI": false}); PopulateMap (* here varius option *);   

The job is to populate my map with markers and data:

  function populateMap (* varius options here *); {Var html.data = "", // will keep a list of links to interact with the user. Each link should open the appropriate marker info window html.dataShow = '' // will keep some html data with the link list; $ ("# My_map"). Gmap ("Clear", "Marker"); Hide $ ("# point view"). $ .getJSON ("path_to_json_file", function (data) {$ .each (data marker, function (i, marker) {htmlData + = '& lt; a href = "javascript: zero (0)" onClick = \' OpenGMarker ("+ Marker.id + '") \' & gt; '+ marker.title +' & lt; / a & gt; & amp; nbsp; $ ("# my_map"). Gmap ("AddMarker", {"status": new google.maps.LatLng (marker.latidad, marker.languitud), "border": true, "icon": marker.con, "id": marker.id,} Gmap ("openInfoWindow", {"content": marker.content}, this);});}); htmlDataShow = "& lt; h2 class" (the function () {$ ("# My_map"). = "Fut20 white lightStripTitleFull"> Select Map  
& gt; One point to look at '' + htmlData + '' & lt; / p & gt; & lt; / div & gt; $ ("# point-view"). Empty () .html ( HtmlDataShow) Show ();}); }

The above function will be generated on the list of avaialble markers / links for interacting the user (click to show details on infowindow).

I have this function to chat with the link to be enabled for the user:

  function OpenGM marker (id) {$ ('# my_map'). Gmap ('closeInfoWindow'); Var marker = $ ('# my_map'). Gmap ('get', 'markers') [id]; //console.log (marker); }   

This function will get a link / marker ID and open the appropriate InfoBound. I managed to get the ID portion, but so far I can not understand how to open infowindow

Any help appreciated?

By providing a working example, I think that you can solve your problem.

Here's one, you can understand it better

  var infowindow = new google.maps.InfoWindow ({content: contentString}); Var Marker = New google.maps.Marker ({status: myLatlng, Map: Map, Title: 'Food Waste and Organics Workshop'}); Infowindow.open (map, marker);   

To open infoWindow from the distraction, add click listener ,

  google.maps .event.addListener (marker, 'click', function (event) {infowindow.open (map, marker);});           

No comments:

Post a Comment