Google Map API マーカーをクリック時に吹き出しを表示する

Google Map APIを使っての地図上に吹き出しを表示する方法はinfoWindowクラスに吹き出しに表示したいテキストをセットすることで実現できます。

読み込み時に吹き出しを表示

ソースコード全文です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
body{
    margin: 0;
    padding: 0;
}
#map {
   width: 100%;
   height: 100vh;
 }
</style>
</head>
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"></script>
<script>
    var marker = [];
    var infoWindow = [];
    var activeWindow;
    function initMap() {

        // 経緯緯度、吹き出しセット
        var markerData = [
            {
                lat: 35.68124598429957,
                lng: 139.7671147395538,
                content: 'ここに吹き出しがでてきます',
            }
        ];

        // 地図の設定
        var zoom = 12;
        var latlng = new google.maps.LatLng( markerData[0]['lat'], markerData[0]['lng'] );

        // 地図の作成
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: zoom,
          center: latlng
        });

        // マーカーの作成
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        });

        // 吹き出しの追加
        infoWindow = new google.maps.InfoWindow({
         content: markerData[0]['content']
        });
        infoWindow.open(map, marker);
    }
</script>
</body>
</html>

補足

  • 【APIキー】に自分のAPIキーを挿入します。

クリックした時に吹き出しを表示

ソースコード全文です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
body{
    margin: 0;
    padding: 0;
}
#map {
   width: 100%;
   height: 100vh;
 }
</style>
</head>
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"></script>
<script>
    var marker = [];
    var infoWindow = [];
    var activeWindow;
    function initMap() {

        // 経緯緯度、吹き出しセット
        var markerData = [
            {
                lat: 35.68124598429957,
                lng: 139.7671147395538,
                content: 'ここに吹き出しがでてきます',
            }
        ];

        // 地図の設定
        var zoom = 12;
        var latlng = new google.maps.LatLng( markerData[0]['lat'], markerData[0]['lng'] );

        // 地図の作成
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: zoom,
          center: latlng
        });

        // マーカーの作成
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        });

        // 吹き出しの追加
        infoWindow = new google.maps.InfoWindow({
         content: markerData[0]['content']
        });

         markerEvent(); // マーカーにクリックイベントを追加
    }

    // マーカーにクリックイベントを追加
    function markerEvent() {
        marker.addListener('click', function() {
            infoWindow.open(map, marker);
      });
    }
</script>
</body>
</html>

補足

  • 【APIキー】に自分のAPIキーを挿入します。

複数のマーカーをクリックした時に吹き出しを表示(開閉)

ソースコード全文です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
body{
    margin: 0;
    padding: 0;
}
#map {
   width: 100%;
   height: 100vh;
 }
</style>
</head>
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"></script>
<script>
    var marker = [];
    var infoWindow = [];
    var activeWindow;
    function initMap() {

        // ①経緯緯度、吹き出しセット
        var markerData = [
            {
                lat: 35.68124598429957,
                lng: 139.7671147395538,
                content: 'マーカー1です',
            },
            {
                lat: 35.68961484942353,
                lng: 139.70055520456194,
                content: 'マーカー2です',
            },
            {
                lat: 35.65804859053836,
                lng: 139.7016297632016,
                content: 'マーカー3です',
            },
        ];

        // 地図の設定
        var zoom = 12;
        var latlng = new google.maps.LatLng( markerData[0]['lat'], markerData[0]['lng'] );

        // 地図の作成
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: zoom,
          center: latlng
        });

        // マーカーの作成
         for (var i = 0; i < markerData.length; i++) {

            markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']});
            marker[i] = new google.maps.Marker({
                position: markerLatLng,
                map: map,
            });

            infoWindow[i] = new google.maps.InfoWindow({
                content: markerData[i]['content']
            });

             markerEvent(i);
         }
    }

    // マーカーにクリックイベントを追加
    function markerEvent(i) {
        marker[i].addListener('click', function() {
            if(activeWindow !== undefined){
                activeWindow.close();
            }
            activeWindow = infoWindow[i];
            infoWindow[i].open(map, marker[i]);
      });
    }
</script>
</body>
</html>

補足

  • 【APIキー】に自分のAPIキーを挿入します。
  • ①経緯緯度、吹き出しセットのところでマーカーを追加します
  • このエントリーをはてなブックマークに追加

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note