[jQuery] Having troubles accessing a variable in $.each

[jQuery] Having troubles accessing a variable in $.each


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">

<strong class="ChapterName">' + chapter + '</
strong> - ' + locale + ' ' + ContentSm + '

<p
class="miniInstruc">Click the + symbol at the top of this bubble to
see the image bigger.</div>';
                             var BiggieContent = '<div style="padding:10px 0 0 0;"><img
src="' + imageBg + '" class="BigPic">

<strong class="ChapterName">'
+ chapter + '</strong> - ' + locale + ' ' + ContentSm + '

</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.