Отображение нескольких маркеров на карте Google api v3 из цикла $ .each

Question

Я пытаюсь получить несколько маркеров на карте Google, используя API V3.Маркер, который я хочу показать, это розовый квадрат с именем beachflag.png.Когда моя программа попадает в функцию setMarkers, значения внутри массивов, созданных в цикле $ .each, теряются.Функция оповещения отображает неопределенное.Я не вижу, как это возможно, потому что я объявил этот массив в начале сценария (глобальный).Однако, когда цикл for в нижней части, который проходит по массиву местоположений, имеет только одно значение.Все значения, которые я вставил в массивы (location, lat и elong), исчезли.Я следовал примеру из примера API Google для v3 (https://google -developers.appspot.com / maps / Documentation / javascript / examples / icon-complex? Hl = fr-FR), и он не работает для меня.вот моя живая тестовая страница: 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

У вас есть опечатка, вы заполняете event<strong>s</strong>Lat[] и event<strong>s</strong>Long[], но вы пытаетесь получить доступ к eventLat[] и eventLong[] здесь:

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