homepage Welcome to WebmasterWorld Guest from 54.166.159.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jquery ui map v3 and google map api
omoutop

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4586421 posted 1:15 pm on Jun 21, 2013 (gmt 0)

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();

$("#my_map").width(600).height(620);

$("#my_map").gmap({
"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");
$("#point-view").hide();

$.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;';

$("#my_map").gmap("addMarker",
{
"position": new google.maps.LatLng(marker.latitude, marker.longitude),
"bounds": true ,
"icon": marker.icon,
"id":marker.id,
}).click(function()
{
$("#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>';
$("#point-view").empty().html(htmlDataShow).show();


});
}


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)
{
$('#my_map').gmap('closeInfoWindow');
var marker = $('#my_map').gmap('get', 'markers')[id];
//console.log(marker);
}


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

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved