Google Mapに複数の吹き出し付きマーカーを設置する

auです。

Google Maps APIを使って吹き出し付きのマーカーを複数設置してみました。

調べてみるとたくさん出るので、やり方は複数ありそうです。

やり方

function markerEvent(i) {
    marker[i].addListener('click', function() { // マーカーをクリックしたとき
        infoWindow[i].open(map, marker[i]); // 吹き出しの表示
    });
}

// DBからデータを取得
async function readDB() {
    const store = new SteinStore(
    return element
}
var map;
var marker = [];
var infoWindow = [];
// マーカーを設置
async function initMap() {
    let data = await readDB();
if (navigator.geolocation) {
// 現在地を取得
navigator.geolocation.getCurrentPosition(
    // 取得成功した場合
    function(position) {
        // 緯度・経度を変数に格納
        var mapLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        // マップオプションを変数に格納
        var mapOptions = {
            zoom : 15,          // 拡大倍率
            center : mapLatLng  // 緯度・経度
        };
        // マップオブジェクト作成
        var map = new google.maps.Map(
            document.getElementById("map"), // マップを表示する要素
            mapOptions         // マップオプション
        );
        //マーカーを配置するループ
        for (i = 0; i < data.length; i++) {
            marker[i] = new google.maps.Marker({
                position: new google.maps.LatLng(data[i].lat, data[i].lng),
                map: map
            });
            infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
                content: "<a href=" + data[i].url + ">" + data[i].name + "</a>" // 吹き出しに表示する内容
            });
            markerEvent(i);
        }
        }
);
}

僕の場合、DBから配列でデータを受け取り、緯度経度の情報を下にマーカーを設置するということを行いました。

吹き出しにリンクを設置する方法は色々あるようですが、aタグを使うのが一番手っ取り早いと思います。