javascript google maps API で、複数のマーカーと吹き出しを設置するサンプル

program

https://www.tam-tam.co.jp/tipsnote/javascript/post7755.html
https://teratail.com/questions/31721

<!DOCTYPE html>
<html>
<body>
<div id="map" style="width:800px; height:800px;"></div>
<script>
var map;

var centerPos = { lat: 34.3986543, lng: 132.4553011 };

var markerPosList = [
    { lat: 34.4036825, lng: 132.4514816 },
    { lat: 34.3977336, lng: 132.4583481 },
    { lat: 34.3964942, lng: 132.4533699 },
];

function initMap() {
    // 地図表示
    map = new google.maps.Map(document.getElementById('map'), {
        center: centerPos,
        zoom: 15.0
    });

    // マーカーを追加
    for (var i=0; i<markerPosList.length; i++) {
        // マーカーを追加
        var marker = new google.maps.Marker({
            position: markerPosList[i],
            map: map
        });

        // マーカークリック時バルーン内容を設定
        addInfoWindowOne(map, marker, `<div><h1>タイトル${i}</h1>内容内容内容<br>2行目<br><img src="https://picsum.photos/300/20${i}/?random" style="border:solid 1px black;"></div>`);

    }
}

// 複数バルーンを同時に開く版
function addInfoWindow(map, marker, html) {
    var infoWindow = new google.maps.InfoWindow({ content: html });
    
    marker.addListener("click", function() {
        infoWindow.open(map, marker);
    });

}

// 常に1つのバルーンを開く版
var infoWindowOne;
function addInfoWindowOne(map, marker, html) {
    if (infoWindowOne == null) {
        infoWindowOne = new google.maps.InfoWindow();
    }

    google.maps.event.addListener(marker, "click", function() {
        infoWindowOne.setContent(html);
        infoWindowOne.open(map, marker);
    });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=★APIキー必須★&callback=initMap" async defer></script>
</body>
</html>