Google Maps API V3 InfoWindowを複数表示

ここではGoogle Maps API V3 InfoWindowを複数表示する方法を解説しています。

※2018年7月16日よりAPIキーが必須で有料になりました。
Google Cloud Console にログインしてMaps JavaScript APIとGeocoding APIのキーを発行してください。
https://cloud.google.com/

GoogleMap

デモはこちら
https://office-goto.info/demo/infowindow-plurality2/

サンプルソース

google.maps.event.addDomListener(window, 'load', function() {
    var latlng = new google.maps.LatLng(35.671277, 139.718489);
    var options = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), options);

    // Marker:LatLng / InfoWindow:text
    var arrData = new Array();
    arrData[0] = {"LatLng":new google.maps.LatLng(35.671277, 139.718489), "text": "Hellow"};
    arrData[1] = {"LatLng":new google.maps.LatLng(35.66991, 139.715291), "text": "GoodBye"};

    // setMarkerDataを配列分
    for (i = 0; i < arrData.length; i++) {
        setMarkerData(i);
    }

    // MarkerとInfoWindowを登録
    function setMarkerData(n) {
        var marker = new google.maps.Marker({
            position: arrData[n]["LatLng"],
            map: map,
            title: "ツールチップ" + (n + 1),
            icon: "icon.png"
        });
        // InfoWindowオブジェクト
        var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, 'click', function (e) {
            infowindow.setContent(arrData[n]["text"]);
            infowindow.open(map, marker);
        });
    }
});

InfoWindowを複数表示する場合には独自関数にローカルでInfoWindowオブジェクトを定義します。
こうすることでInfoWindowを複数表示することが出来ます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください