ズーム付きのカスタム画像マーカーのサイズ変更 - Google Maps API v3

Question

Google Map APIのアイコン/マーカーとしてカスタム画像を使用しています。ユーザーが地図を拡大すると、マーカー画像のサイズを変更したいと思います。

私はこの質問からのコードの一部を採用した：Google Maps :: Changing icon based on zoom level

は残念ながら、このスクリプトは私のリストの最後の緯度/経度マーカーを変更します。なぜ私は間違いを指摘することができますか？

var locations = [ 
['Aaron Baddeley (130)',-25.274398,133.775136], 
['Adam Hadwin (176)',52.939916,-106.450864], 
['Adam Scott (7)',-26.65,153.066667], 
['Adilson da Silva (291)',-28.530554,30.895824], 
['Alejandro Canizares (167)',40.416775,-3.70379],]; 

var infowindow = new google.maps.InfoWindow({} 

var image = new google.maps.MarkerImage('images/marker11.gif', 
    new google.maps.Size(9,9), //size 
    null, //origin 
    null, //anchor 
    new google.maps.Size(9,9) //scale 
); 

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, 
    icon: image, 
}); 

//when the map zoom changes, resize the icon based on the zoom level so the marker covers the same geographic area 
google.maps.event.addListener(map, 'zoom_changed', function() { 
    var pixelSizeAtZoom4 = 9; //the size of the icon at zoom level 4 
    var maxPixelSize = 350; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels 

    var zoom = map.getZoom(); 
    var relativePixelSize = Math.round(pixelSizeAtZoom4*Math.pow(1.2,zoom)); // use 2 to the power of current zoom to calculate relative pixel size. Base of exponent is 2 because relative size should double every time you zoom in 

    if(relativePixelSize > maxPixelSize) //restrict the maximum size of the icon 
    relativePixelSize = maxPixelSize; 

    if(zoom < 4) //when zooming < 4, fix pixel size to 9 
    relativePixelSize = 9; 


//change the size of the icon 

marker.setIcon(
    new google.maps.MarkerImage(
     marker.getIcon().url, //marker's same icon graphic 
     null,//size 
     null,//origin 
     null, //anchor 
     new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale 
    ) 
);   
}); 

Answer 1

は、あなたがそれらを作成するときは、アレイmarkersであなたのマーカーを保存する必要があり

map.addListener('zoom_changed', function() { 
    for (var i=0, len = locations.length; i < len; i++) { 
     // set new icon depending on the value of map.getZoom() 
     markers[i].setIcon(...) 
    } 
}); 

マーカーのアイコンの変更をトリガzoom_changedイベントのイベントリスナーを追加します。ここでは

コードですforループでは、 markers[i]として参照できます。