JavaScript
Web
GoogleMapsAPI

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

やりたいこと

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