LoginSignup
1
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-06-27

やりたいこと

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1