Google Maps APIでピンをクリックしたときに吹き出しを表示する方法

Google Mapsでオリジナルのピンを表示させたい場合、ただ表示させるだけではなくクリックしたときに吹き出しを表示させて、その場所がなんなのか表示させたいことがあります。

Google Maps APIの設定

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

Webrandum

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

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

Google Maps APIを使う1番のメリット（理由）はオリジナルのピンを設置できることです。「オリジナルのピンを設定する方法を調べてみたらGoogle Maps APIっていうのを使わないといけないらしい」となって使う人も多いのでは無いでしょうか？今回はそんなオリジナルのピンの設定方法についてまとめておきます。Google Maps APIの設定Google Maps APIの初期設定については過去に記事にしてあるのでそちらをご覧ください。まずは下記の基本のコードでGoogle Maps APIでマップを表示させます。<div id="map"></div>&...

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

Webrandum

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

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

Google Maps APIを使う1番のメリット（理由）はオリジナルのピンを設置できることです。「オリジナルのピンを設定する方法を調べてみたらGoogle Maps APIっていうのを使わないといけないらしい」となって使う人も多いのでは無いでしょうか？今回はそんなオリジナルのピンの設定方法についてまとめておきます。Google Maps APIの設定Google Maps APIの初期設定については過去に記事にしてあるのでそちらをご覧ください。まずは下記の基本のコードでGoogle Maps APIでマップを表示させます。<div id="map"></div>&...

上記の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>

InfoWindowの使用

Google Maps APIで吹き出しを表示させたい場合はInfoWindowを使用します。

InfoWindowの定義

InfoWindowのcontentプロパティに表示させたいテキストを入力します。

let infoWindow = new google.maps.InfoWindow({
  content: '<div class="window">InfoWindow内のテキスト</div>'
})

テキストだけでもいいですし、HTMLタグを書くこともできるので、<img>を使って画像を表示させるのも可能です。

マーカークリック時にInfoWindowを開く

現状マーカーの定義とInfoWindowの定義が終わっている状態なので、「マーカーをクリックしたときに、InfoWindowを表示させる」コードを追加します。

まずはマーカーにaddListenerでクリック時に発火するようにして、変数のinfoWindowにopen(マップの指定, マーカーの指定)でマーカーのすぐ上に表示されるようになります。

marker.addListener("click", () => {
  infoWindow.open(map, marker);
});

表示の確認

実際に表示を確認して、マーカーをクリックすると下記のような吹き出しが表示されます。

ちゃんと表示されていれば、InfoWindowの表示は成功です。