Google Maps API複数のマーカーとInfowindows

91

クリックすると表示される独自の情報ウィンドウを持つ複数のマーカーを追加しようとしています。情報ウィンドウを表示するのに問題があります。試してみると、情報ウィンドウのないマーカーが1つしか表示されません。

ありがとうございます。さらに情報が必要な場合はお知らせください

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0
}

#map_canvas {
    height: 100%
}
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false">
</script>
<script type="text/javascript">

var locations = [
    ['loan 1', 33.890542, 151.274856, 'address 1'],
    ['loan 2', 33.923036, 151.259052, 'address 2'],
    ['loan 3', 34.028249, 151.157507, 'address 3'],
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
    ['loan 5', 33.950198, 151.259302, 'address 5']
];

function initialize() {

    var myOptions = {
        center: new google.maps.LatLng(33.890542, 151.274856),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map, locations)
}


function setMarkers(map, locations) {

    var marker, i
    for (i = 0; i < locations.length; i++) {

        var loan = locations[i][0]
        var lat = locations[i][1]
        var long = locations[i][2]
        var add = locations[i][3]

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({
            map: map, title: loan, position: latlngset
        });
        map.setCenter(marker.getPosition())

        var content = "Loan Number: " + loan + '</h3>' + "Address: " + add

        var infowindow = new google.maps.InfoWindow()

        google.maps.AddListener(marker, 'click', function (map, marker) {
            infowindow.setContent(content)
            infowindow.open(map, marker)
        });
    }
}


</script>
</head>
<body onload="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
javascript  google-maps  google-maps-api-3  google-maps-markers  infowindow 
— スタックトレース
ソース
2
マーカーの前に作成される情報ウィンドウは1つだけ使用してください。次に、各マーカーのクリックイベントが正しく機能します。contentイベントリスナー内の変数がその関数内で定義されていません。
— js1568 2012年
1
簡単なコメントのように、コードを適切にフォーマットすると、はるかに読みやすくなります。
— paullb 2017
1
@paullb私はそれを再フォーマットします。私がこの質問を書いたのは、4年前の初心者だったときと同じです:)
— stacktraceyo
クリックやホバーで複数のマーカーの情報ウィンドウ表示するには、このチュートリアルをチェックfreakyjolly.com/...を
— コードスパイ

回答:

203

クロージャーを使用できます。次のようにコードを変更するだけです。

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
    };
})(marker,content,infowindow));

ここにデモがあります

— エンジニア
ソース
2
私はこれを機能させましたが、別のマーカーをクリックするたびに別のマーカーをクリックするたびにさらに多くの情報ウィンドウを開くのではなく、以前に開いていた情報ウィンドウを置き換える情報ウィンドウを開くように、コードをどのように変更しますか？
— 不安定な
できます！しかし、誰かがなぜそれがこのように機能しているのかを誰かに説明できますか？
— Lakshay、2015
1
あなたが同様の問題について読むことができます@Lakshay ここに
— エンジニア
1
この場合、地図の外側をクリックしたときに情報ウィンドウをどのように閉じるべきですか？
— Rohit Tigga 2016年
情報ウィンドウを閉じる方法は？infowindow.close()動作しません。
— mokiSRB 2016
10

これが確実に機能するコードスニペットです。jsFiddleの動作と詳細な説明については、以下のリンクをご覧ください。 グーグルマップで完璧なズームで複数の住所を見つける方法

var infowindow = new google.maps.InfoWindow();  
google.maps.event.addListener(marker, 'mouseover', (function(marker) {  
           return function() {  
               var content = address;  
               infowindow.setContent(content);  
               infowindow.open(map, marker);  
           }  
         })(marker));
— evaipar
ソース
5

ソースリンク

デモリンク

次のコードは、InfoWindowで複数のマーカーを表示します。コードのコメントを解除して、ホバーに情報を表示することもできます

ここに画像の説明を入力してください

            var map;
            var InforObj = [];
            var centerCords = {
                lat: -25.344,
                lng: 131.036
            };
            var markersOnMap = [{
                    placeName: "Australia (Uluru)",
                    LatLng: [{
                        lat: -25.344,
                        lng: 131.036
                    }]
                },
                {
                    placeName: "Australia (Melbourne)",
                    LatLng: [{
                        lat: -37.852086,
                        lng: 504.985963
                    }]
                },
                {
                    placeName: "Australia (Canberra)",
                    LatLng: [{
                        lat: -35.299085,
                        lng: 509.109615
                    }]
                },
                {
                    placeName: "Australia (Gold Coast)",
                    LatLng: [{
                        lat: -28.013044,
                        lng: 513.425586
                    }]
                },
                {
                    placeName: "Australia (Perth)",
                    LatLng: [{
                        lat: -31.951994,
                        lng: 475.858081
                    }]
                }
            ];

            window.onload = function () {
                initMap();
            };

            function addMarkerInfo() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

                    const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map
                    });

                    const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

                    marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });
                    // marker.addListener('mouseover', function () {
                    //     closeOtherInfo();
                    //     infowindow.open(marker.get('map'), marker);
                    //     InforObj[0] = infowindow;
                    // });
                    // marker.addListener('mouseout', function () {
                    //     closeOtherInfo();
                    //     infowindow.close();
                    //     InforObj[0] = infowindow;
                    // });
                }
            }

            function closeOtherInfo() {
                if (InforObj.length > 0) {
                    InforObj[0].set("marker", null);
                    InforObj[0].close();
                    InforObj.length = 0;
                }
            }

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: centerCords
                });
                addMarkerInfo();
            }
— コードスパイ
ソース
この解決のための要件は、そうでなければしない仕事..情報ウィンドウとマーカーのためのconstの使用である
— ジム・Jimson
2

情報ウィンドウのクローズをいくつかのイベントにバインドしたい場合は、次のようなことを試してください

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
        windows.push(infowindow)
        google.maps.event.addListener(map,'click', function(){ 
            infowindow.close();
        }); 
    };
})(marker,content,infowindow));
— ビナヤクカニヤラッカル
ソース
0 
function setMarkers(map,locations){

for (var i = 0; i < locations.length; i++)
 {  

 var loan = locations[i][0];
 var lat = locations[i][1];
 var long = locations[i][2];
 var add =  locations[i][3];

 latlngset = new google.maps.LatLng(lat, long);

 var marker = new google.maps.Marker({  
          map: map, title: loan , position: latlngset  
 });
 map.setCenter(marker.getPosition());


 marker.content = "<h3>Loan Number: " + loan +  '</h3>' + "Address: " + add;


 google.maps.events.addListener(marker,'click', function(map,marker){
          map.infowindow.setContent(marker.content);
          map.infowindow.open(map,marker);

 });

 }
}

次にvar infowindow = new google.maps.InfoWindow()、initialize()関数に移動します。

function initialize() {

    var myOptions = {
      center: new google.maps.LatLng(33.890542, 151.274856),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);
    map.infowindow = new google.maps.InfoWindow();

    setMarkers(map,locations)

  }
— js1568
ソース
1
google.maps.events.AddListenerする必要がありますgoogle.maps.event.addListener
— パトリックヤン
私が取得TypeError: map.infowindow is undefined私が含まれている場合var infowindow = new google.maps.InfoWindow();、私のinitialize（）関数の内部
— invot
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.