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

URL: https://webrandum.net/google-maps-api-infowindow/
公開日: 2021-02-14
更新日: 2021-02-14
カテゴリー: コーディング
タグ: Google Maps API
出典: Webrandum（著者: サイトウ マサカズ）

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

## Google Maps APIの設定

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

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2021/01/eyecatch-9.jpg)Google Maps APIでピンの見た目をカスタマイズする方法https://webrandum.net/google-maps-api-markerGoogle Maps APIを使う1番のメリット（理由）はオリジナルのピンを設置できることです。「オリジナルのピンを設定する方法を調べてみたらGoogle Maps APIっていうのを使わないといけないらしい」となって使う人も多いのでは無いでしょうか？今回はそんなオリジナルのピンの設定方法についてまとめておきます。Google Maps APIの設定Google Maps APIの初期設定については過去に記事にしてあるのでそちらをご覧ください。まずは下記の基本のコードでGoogle Maps APIでマップを表示させます。<div id="map"></div>&...](https://webrandum.net/google-maps-api-marker)

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

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2021/01/eyecatch-9.jpg)Google Maps APIでピンの見た目をカスタマイズする方法https://webrandum.net/google-maps-api-markerGoogle Maps APIを使う1番のメリット（理由）はオリジナルのピンを設置できることです。「オリジナルのピンを設定する方法を調べてみたらGoogle Maps APIっていうのを使わないといけないらしい」となって使う人も多いのでは無いでしょうか？今回はそんなオリジナルのピンの設定方法についてまとめておきます。Google Maps APIの設定Google Maps APIの初期設定については過去に記事にしてあるのでそちらをご覧ください。まずは下記の基本のコードでGoogle Maps APIでマップを表示させます。<div id="map"></div>&...](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>
```

## 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);
});
```

### 表示の確認

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

![情報ウインドウの表示](https://webrandum.net/mskz/wp-content/uploads/2021/02/image_1-5.png)

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