Googleマップapi v3で複数のマーカーを$ .eachループから表示

Question

API V3を使用してGoogleマップに複数のマーカーを取得しようとしています。 私が見せたいマーカーは、beachflag.pngというピンクの広場です。私のプログラムがsetMarkers関数に到達すると、$。eachループで作成された配列内の値は失われます。警告機能は未定義と表示されます。私はこの配列がスクリプトの最初（グローバル）に宣言されているので、これがどのように可能であるかわかりません。 しかし、最下位のforループが位置配列を反復するとき、それはただ1つの値しか持たない。私が配列にプッシュした値（location、lat、およびelong）はすべて消えています。私はv3（https://google-developers.appspot.com/maps/documentation/javascript/examples/icon-complex?hl=fr-FR）のgoogleサンプルAPIからの例に従っています。それは私のためには機能しません。ここ は私のライブテストページです： 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

あなたがeventsLat[]とeventsLong[]を移入され、そこにタイプミスがありますが、あなたはここにeventLat[]とeventLong[]にアクセスしよう：

​​