Несколько маркеров Google Maps API с информационными окнами

93

Я пытаюсь добавить несколько маркеров, каждый со своим информационным окном, которое появляется при нажатии. У меня возникают проблемы с появлением информационных окон, когда я пытаюсь это сделать, либо отображается только один маркер без информационного окна.

Спасибо, дайте мне знать, если вам понадобится дополнительная информация

<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 stacktraceyo
источник
2
Используйте только ОДНО информационное окно, которое создается перед маркерами. Тогда ваше событие щелчка для каждого маркера будет работать правильно. Переменная contentвнутри вашего слушателя событий не определена в этой функции.
js1568
1
Как быстрый комментарий, если вы хорошо отформатируете свой код, его будет намного легче читать.
paullb
1
@paullb Я переформатирую его, я написал этот вопрос, как 4 года назад, когда я был больше новичком :)
stacktraceyo
Просмотрите этот учебник, чтобы отобразить информацию о нескольких маркерах. Окно с щелчком и наведением курсора freakyjolly.com/…
Code Spy

Ответы:

206

Вы можете использовать закрытие. Просто измените свой код следующим образом:

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

Вот ДЕМО

Инженер
источник
2
У меня это работает, но как мне изменить код, чтобы при нажатии на другой маркер открывалось информационное окно, которое заменяло информационное окно, которое было открыто ранее, вместо того, чтобы постоянно открывать новые информационные окна каждый раз, когда я нажимаю на другой маркер?
railsy
оно работает! но может ли кто-нибудь объяснить мне, почему он работает таким образом?
Lakshay
1
@Lakshay Вы можете прочитать о подобной проблеме здесь
Инженер
1
Как в этом случае закрыть информационное окно при щелчке мышью за пределами карты?
Рохит Тигга,
Как закрыть информационное окно? infowindow.close()не работают.
mokiSRB 03
10

Вот фрагмент кода, который точно будет работать. Вы можете перейти по ссылке ниже для работы с jsFiddle и подробного объяснения. Как найти несколько адресов на картах Google с идеальным масштабированием

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
источник
6

Ссылка на источник

Демо ссылка

Следующий код покажет несколько маркеров с InfoWindow . Вы можете раскомментировать код , чтобы показать , информацию о Hover , а также

введите описание изображения здесь

            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 для информационного окна и маркера, иначе это не сработает ..
Джим
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();
включу