WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

Google Maps APIの設定

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

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

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

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

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

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

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

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

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

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

表示の確認

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

情報ウインドウの表示

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね