Google Maps APIでピンのアクティブ時にピン画像を変える方法

2021年2月19日

著者：サイトウマサカズ

Google Mapsでオリジナルのピンを表示させたい場合、通常時とクリック時でピンを変えたい場合があります。
そんなときの実装方法についてまとめておきます。

Google Maps APIの設定

Google Maps APIの初期設定については過去に記事にしてあるのでそちらをご覧ください。

Webrandum

Google Maps APIでピンの見た目をカスタマイズする方法

https://webrandum.net/google-maps-api-marker

そして、オリジナルのピンの表示方法は下記の記事で解説しています。

Webrandum

Google Maps APIでピンの見た目をカスタマイズする方法

https://webrandum.net/google-maps-api-marker

上記の2つの記事が前提で、まずは下記のコードでGoogle Maps APIでオリジナルのピンを表示させます。

<div id="map"></div>
<script>
initMap();
function initMap() {
  let map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 35.681382, lng: 139.766083},
    zoom: 8
  });

  //マーカーの追加
  let marker = new google.maps.Marker({
    position: {lat: 35.681382, lng: 139.766083}, // ピンの緯度・経度
    map: map, // 追加するGoogle Mapsを指定
    icon: {
      url: './images/pin.png' // ピンの画像パスを指定
    }
  });
}
</script>

クリックしたらピンを変える

ピンをクリックしたときに状態を変えたいので、ピンに対してaddListenerでclickを指定します。

そしてsetOptionsを使うと、後からピンの状態を変えられます。
今回の場合はアイコン画像だけ変えられればOKなのでicon.urlを別の画像にします。

marker.addListener('click', function() { // markerクリック時に発火
  marker.setOptions({ // ここでピンのoptionを変更
    icon:{
      url:'./images/pin_active.png', // クリック時の画像を指定
    }
  });
});

クリックしたピンをマップの中央にする

クリックしてただ画像が変わるだけだとあまり意味はないので、クリックしたらピンをマップの真ん中に移動させるようにしましょう。

panTo(座標)で、指定した座標に滑らかに移動します。
他にsetCenter(座標)というものもありますが、こちらはアニメーションせず一瞬で移動してしまいます。

marker.addListener('click', function() {
  marker.setOptions({
    icon:{
      url:'./images/pin_active.png',
    }
  });
  map.panTo(marker.position); // この行を追加
});

setCenterを使いたい場合は、panToをsetCenterに変えればそのまま使えます。

複数のピンを用意する

ピンが1つだけで、アクティブ時のピンを変えたい場合は少ないと思います。
複数用意したい場合は、下記のようにピンの座標を配列で用意します。

let markers = [
  {
    lat: 35.681082,
    lng: 139.766883
  },
  {
    lat: 35.681482,
    lng: 139.766483
  },
  {
    lat: 35.681882,
    lng: 139.766043
  },
];

次に、マーカーの画像を元に戻す処理を追加しておきます。
そうしないとクリックしたマーカー全てがアクティブなものに変わっていってしまいます。

やっていることは、markerArrayというピンの情報が入った変数をループさせて、順番にデフォルト状態の画像を設定しているだけです。

function clearMarker() {
  markerArray.forEach(function (marker, idx) {
    marker.setOptions({
      icon:{
        url:'./images/pin.png',
      }
    });
  });
}

あとはループでピンを登録していきながら、そのときにクリック時の処理も一緒に登録していきます。
markerArrayを定義すること、markerを作成したあとにそれをmarkerArrayにpushしておくこと、クリック時の処理の最初にclearMarker()を使ってピンをクリアするのを忘れないようにしましょう。

let markerArray = [];
for (let i = 0; i < markers.length; i++) {
  let markerPosition = new google.maps.LatLng({lat: markers[i]['lat'], lng: markers[i]['lng']});
  let marker = new google.maps.Marker({
    position: markerPosition,
    map: map,
    icon: {
      url: './images/pin.png'
    }
  });
  markerArray.push(marker); // markerArrayにmarker情報を追加
  // クリック時の処理
  marker.addListener('click', function() {
     clearMarker(); // ピンのクリア
    marker.setOptions({
      icon:{
        url:'./images/pin_active.png',
      }
    });
    map.panTo(markerPosition);
  });
}

これで、複数のピンが表示されて、クリックするとピンの画像が変わり、マップ中央にスクロールするようになりました。