Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

jquery ui map v3 and google map api



1:15 pm on Jun 21, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Ok, i have a dynamic generated google map (using the jquery ui map v3 plugin).
Map data, depends on user input/selection.

I open the map like this:

map_lat = parseFloat(xxxxxxxxxx);
map_long = parseFloat(xxxxxxxxxxxx);
map_zoom = parseInt(xxxxxxxxxxxx);

myCenter = map_lat+","+map_long;
myCenter = myCenter.toString();


"center": myCenter,
"zoom": map_zoom,
"disableDefaultUI": false
populateMap( *varius options here* );

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

function populateMap( *varius options here* );
var htmlData = "", // will hold a list of links for user to interact. Each link must open appropriate marker info window
htmlDataShow = '' // will hold some html data along with the link list

$("#my_map").gmap("clear", "markers");

$.getJSON( "path_to_json_file", function(data)
$.each( data.markers, function(i, marker)
htmlData += '<a href="javascript:void(0)" onClick=\'openGMarker("'+marker.id+'")\'>'+marker.title+'</a>&nbsp;&nbsp;';

"position": new google.maps.LatLng(marker.latitude, marker.longitude),
"bounds": true ,
"icon": marker.icon,
$("#my_map").gmap("openInfoWindow", { "content": marker.content }, this);

htmlDataShow = '<h2 class="fut20 white lightStripTitleFull">Select a point to view on map</h2><div class="graystrip"><p>'+htmlData+'</p></div>';


This function will append some html data into a container.
These data are actually the titles of all the markers plus a click event.

Something like this:

<a href="javascript:void(0)" onClick='openGMarker("id_xxx")'>some title here</a>

id_xxx is the id of the marker.
Everything works ok - json data are ok, infowindow appears ok when i click the marker inside the map.

My question is: how can i program the click event on the links outside the map to open the correct infowindow?
So far i managed to get the id of the marker to load the proper marker data using the folloging:

function openGMarker(id)
var marker = $('#my_map').gmap('get', 'markers')[id];

But i am lost here. How can i open the infowindow of this selected marker?
Any help is appreciated

Featured Threads

Hot Threads This Week

Hot Threads This Month