I am having troubles with my google maps conversion to jquery. My
markers are being generated from a get json request and then each
marker is being created using $.each. My trouble happen when creating
a side bar with buttons to open the info windows. I can create the
button but can not seem to pull the individual marker info to activate
the info window. Here is my code so far:
var map;
$(document).ready(function() {
if (GBrowserIsCompatible()) {
// Initialize the map.
var baseIcon = new GIcon();
baseIcon.image =
"http://redhattester.googlepages.com/
GmapIcon02.png";
baseIcon.shadow =
"http://redhattester.googlepages.com/
GmapIcon02Shadow.png";
baseIcon.iconSize = new GSize(45, 45);
baseIcon.shadowSize = new GSize(42, 45);
baseIcon.iconAnchor = new GPoint(18,
38);
baseIcon.infoWindowAnchor = new
GPoint(19, 2);
map = new
GMap2(document.getElementById("map")); // This sets up
the and rest just sets up the controls
map.addMapType(G_SATELLITE_3D_MAP); // For Google Earth
map.addMapType(G_PHYSICAL_MAP);
// Adds Satelite maps
map.addControl(new
GMenuMapTypeControl()); // This makes the
choses a drop down menu
map.addControl(new
GLargeMapControl()); // Use large map
controls
map.setMapType(G_HYBRID_TYPE);
// Hybrid map
map.enableScrollWheelZoom(); //
Allows for users to scroll zoom
with their mouse wheel
//console.log("Loading the JSON file")
$.getJSON("GmapData.json",function(data){
var NewLat =
data.items[0].lat; var NewLng =
data.items[0].long; var NewPoint = new GLatLng(NewLat, NewLng);
map.setCenter(NewPoint, 12);
$.each(data.items,function(i,item){
var lat = item.lat;
var lng = item.long; var name = item.name;
var chapter = item.chapter; var locale = item.locale; var imageSm =
item.ImageSm; var imageBg = item.ImageBg; var ContentSm =
item.ContentSm; // Sets up the sorted out info from the json file
var NormalContent =
'<h3>'+ name +'</h3><div
class="iwstyle01"><img src="' + imageSm + '"
class="MiniPic"><p><strong class="ChapterName">' + chapter + '</
strong> - ' + locale + ' ' + ContentSm + '</p><p
class="miniInstruc">Click the + symbol at the top of this bubble to
see the image bigger.</p></div>';
var BiggieContent =
'<div style="padding:10px 0 0 0;"><img
src="' + imageBg + '" class="BigPic"><p><strong class="ChapterName">'
+ chapter + '</strong> - ' + locale + ' ' + ContentSm + '</p></div>';
var point = new
GLatLng(lat,lng);
var marker = new
GMarker(point,{icon:baseIcon}); // Create the
marker.
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(NormalContent, {maxContent:
BiggieContent, maxTitle: name});
});
map.addOverlay(marker);
if (i==0) { //
This will trigger open the newest story
GEvent.trigger(marker, "click");
}
$('#side_bar').append('<li><a href="javascript:myclick('+ i
+')">' + name + '</a></li>');
});
});
// This function picks
up the click and opens the corresponding
info window
function
myclick(i) {
GEvent.trigger(marker[i], "click");
}
} else { alert("Sorry, the Google Maps API is not
compatible
with this browser"); }
});
$(document.body).unload(function() {
if (GBrowserIsCompatible()) {
GUnload();
}
});
Please help me... I am still new to JavaScript and Jquery.
