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

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

読み込み時に表示
クリックした時に表示
複数のマーカーをクリックした表示（開閉Ver）

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

ソースコード全文です。

<!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>