Google map api、マーカーごとに同じアイコン

Question

マーカーごとに異なるアイコンを使用したいと考えています。 私のコードに問題があります。配列の最後の項目だけが使用されます。 クエリ配列に3つの項目がある場合、3つのマーカーすべてに3.pngのアイコンが表示されます。

ありがとうございました！

 var img = new Array(); 
     img.push("'images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png", "images/6.png", "images/7.png", "images/8.png", "images/9.png"); 

     var myOptions = { 
      scaleControl: true, 
      streetViewControl: false, 
      zoom: 12, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

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

     var markers = new Array(query.length); 

     for (i=0;i<query.length;i++) 
     { 
      var geocoder = new google.maps.Geocoder(); 
      var address = query[i]; 

      var image = new google.maps.MarkerImage(
      img[i], 
      new google.maps.Size(24,24), 
      new google.maps.Point(0,0), 
      new google.maps.Point(24,24) 
      ); 

      geocoder.geocode({ 'address': address }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location); 
        markers[i] = new google.maps.Marker({ 
         title:"Marker "+i, 
         icon: image, 
         map: map, 
         position: results[0].geometry.location 
        }); 
        markers[i].setMap(map); 
       } else { 
        alert("Geocode was not successful for the following reason: " + status); 
       } 
      }); 


     }; 

    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

あなたは常にgeocodeに渡されたコールバックで同じiを得るようです。 suggestedのようなソリューションをお試しください。 Googleのジオコーディングサービスへのアクセス

Answer 2

は非同期で

これはあなたの問題を解決する必要があり

、

var img = new Array(); 
    img.push("'images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png", "images/6.png", "images/7.png", "images/8.png", "images/9.png"); 

    var myOptions = { 
     scaleControl: true, 
     streetViewControl: false, 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

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

    var markers = new Array(query.length); 
    var images = new Array(query.length); 

    for (i=0;i<query.length;i++) 
    { 
     var geocoder = new google.maps.Geocoder(); 
     var address = query[i]; 

     var image = new google.maps.MarkerImage(
     img[i], 
     new google.maps.Size(24,24), 
     new google.maps.Point(0,0), 
     new google.maps.Point(24,24) 
     ); 

     images[i] = image; 

     geoCode(i); 

    }; 

    function geoCode(i){ 

      geocoder.geocode({ 'address': address }, function (results, status) { 

      if (status == google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 
       markers[i] = new google.maps.Marker({ 
        title: results[0].formatted_address, 
        icon: images[i], 
        map: map, 
        position: results[0].geometry.location 
       }); 
       markers[i].setMap(map); 
      } else { 
       alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
    } 


} 

google.maps.event.addDomListener(window, 'load', initialize);