Display multiple Markers on google map api v3 from $.each loop

Question

I'm trying to get multiple markers on a Google map using API V3. The marker I want to show is a pink square named beachflag.png. When my program gets to the setMarkers function the values inside the arrays created in the $.each loop are lost. The alert function displays undefined. I don't see how this is possible because I've declared this arrays at the beginning of the script (global). However, when the for loop at the bottom that iterates through the location array it has only one value. All the values I pushed into the arrays(location, lat, and elong) are gone. I have been following an example from google sample api for v3(https://google-developers.appspot.com/maps/documentation/javascript/examples/icon-complex?hl=fr-FR) and it is not working for me. here is my live test page: otakufinder

var userLat="";

var userLong="";

var map;

var eventsLat=[];

var eventsLong=[];

locations=[];

var i=0;

  jQuery(window).ready(function(){

                jQuery("#btnInit").click(initiate_geolocation);

            });

            function initiate_geolocation() {

                //watch position
                navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);

            }

            function handle_errors(error)
            {
                switch(error.code)
                {
                    case error.PERMISSION_DENIED: alert("user did not share geolocation data");
                    break;

                    case error.POSITION_UNAVAILABLE: alert("could not detect current position");
                    break;

                    case error.TIMEOUT: alert("retrieving position timed out");
                    break;

                    default: alert("unknown error");
                    break;
                }
            }

            function handle_geolocation_query(position){


                userLat=position.coords.latitude;

                userLong=position.coords.longitude;

                var userLocation = new google.maps.LatLng(userLat, userLong);

                var mapOptions = {
                        zoom: 8,
                        center: userLocation,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);


                var marker= new google.maps.Marker({
                position: new google.maps.LatLng(userLat, userLong),
                title: "Hello Testing",
                clickable: true,
                map: map
                });


             var numRand = Math.floor(Math.random()*1000)

              $.get('http://leobee.com/otakufinder/scripts/geoloco.php?userLat='+userLat+'&userLong='+userLong+'&randNum='+numRand,



                    function (data){


                        var jsontext = data;

                        var contact = JSON.parse(jsontext);




                        $.each(contact , function() {

                             $('#otakuEvents').append(
                            '<div>'
                            + this.event_name
                            + '</div><div>'
                            + this.lat +"  "+this.elong
                            +
                            '</div>'


                         );// end div
                eventsLat.push(this.lat);

                eventsLong.push(this.elong);

                locations.push(this.event_name);


                });// end .each


setMarkers(map,locations);

function setMarkers(map, locations) {
alert (" in setMarkers function "+ eventsLat[i]);//output undefined
var image = new google.maps.MarkerImage('images/beachflag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('../images/beachflag.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};

for (var i = 0; i < locations.length; i++) {
alert (" inside for loop "+ eventsLat[i]);// output has only one variable init
var myLatLng = new google.maps.LatLng(eventLat[i], eventLong[i]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,

});
}
}
            }// end data callback

        );// end getJson
 }

Answer 1

You have a typo there, you are populating eventsLat[] and eventsLong[] , but you try to access eventLat[] and eventLong[] here:

var myLatLng = new google.maps.LatLng(eventLat[i], eventLong[i]);