やりたいこと
zoom levelに応じてmarkerの画像やサイズを変えたい
コード
gmapsample.js
google.maps.event.addListener(map, 'zoom_changed', function(e){
const currentzoom = map.getZoom();
if(currentzoom < 12){
for(let i in marker) {
let image = {
url: '/img/smallerIcon.png',
anchorPoint: new google.maps.Point(0,0),
scaledSize: new google.maps.Size(50,50),
};
marker[i].setIcon(image);
}
}
});
zoom_changed
のイベントリスナにzoom levelに応じた処理を書いて、最後にmarkerそれぞれにsetIcon()
メソッドを呼べばmarkerの設定が変わります。
上記の例ですと、image =
でmarkerの設定を書いて、marker[i].setIcon(image)
でセットしています。
以下はsetIconに関する参考です。
setIcon
google.maps.Icon interface