Googleマップでマーカーの配列を追加する

Question

マーカーを1つずつ作成するのではなく、効率的になるように、Googleマップでマーカーの配列を作成する際に助けが必要です。私は以下を試みたが、うまくいきませんでした。誰にでもアドバイスがありますか？

//create array to store a set of location 
var collection = new Array(); 

//a set of locations stored in array 
collection[0] = new google.maps.LatLng(13.742167701649997, 100.50721049308777); 
collection[1] = new google.maps.LatLng(13.74428, 100.5404525); 
collection[2] = new google.maps.LatLng(13.744108, 100.543098); 

var pointMarkerImage = new Array();//store image of marker in array 
var pointMarker = new Array();//store marker in array 

//create number of markers based on collection.length 
function setPoint(){ 
for(var i=0; i<collection.length; i++){ 

var pointMarkerImage[i] = new google.maps.MarkerImage('marker.png'); 
var pointMarker[i] = new google.maps.Marker({ 
     position: collection[i], 
     map: map, 
     icon: pointMarkerImage[i], 
     animation: google.maps.Animation.BOUNCE, 
     title: "collection"+ i 
    }); 

    google.maps.event.addListener(pointMarker[i], 'click', function() { 
      window.open("blog/page01.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes") 
      }; 
    ); 
    } 
} 

Answer 1

私はいくつかのことを参照してください。...ただpointMする必要がありますループのため、VaRのpointMに

1）... varは、それはあなたがのためにループの外に持っているセットを無視します追加。

2）あなたはaを持っています。物事を壊している機能の後に。

これを試してみてください：

//create array to store a set of location 
var collection = new Array(); 

//a set of locations stored in array 
collection[0] = new google.maps.LatLng(13.742167701649997, 100.50721049308777); 
collection[1] = new google.maps.LatLng(13.74428, 100.5404525); 
collection[2] = new google.maps.LatLng(13.744108, 100.543098); 

var pointMarkerImage = new Array();//store image of marker in array 
var pointMarker = new Array();//store marker in array 

//create number of markers based on collection.length 
function setPoint(){ 
    for(var i=0; i<collection.length; i++){ 

    pointMarkerImage[i] = new google.maps.MarkerImage('marker.png'); 
    pointMarker[i] = new google.maps.Marker({ 
      position: collection[i], 
      map: map, 
      icon: pointMarkerImage[i], 
      animation: google.maps.Animation.BOUNCE, 
      title: "collection"+ i 
    }); 

    google.maps.event.addListener(pointMarker[i], 'click', function(){ 
     window.open("blog/page01.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes"); 
    } 
    ); 
    } 
} 

Answer 2

これは私の単純なコードであり、それは正常に動作します。マーカーをクリックすると、そのマーカーの位置に基づいて情報ウィンドウが開きます。

<script> 
var locations = [ 
    ['Title A', 3.180967,101.715546, 1], 
    ['Title B', 3.200848,101.616669, 2], 
    ['Title C', 3.147372,101.597443, 3], 
    ['Title D', 3.19125,101.710052, 4] 
]; 
var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 12, 
    center: new google.maps.LatLng(3.171368,101.653404), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var infowindow = new google.maps.InfoWindow; 

var marker, i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 
} 
</script> 

<div data-role="page" id="map_result"> 
    <div data-role="header" data-position="fixed"><h1>Multiple Marker</h1></div> 
    <div data-role="content" style="padding:0;"> 
     <div id="map"></div> 
    </div> 
</div>