Edited at

Google Maps APIでzoom levelに応じてmarkerの画像やサイズなどを変える

More than 1 year has passed since last update.


やりたいこと

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