Google Maps API Multiple Markers z Infowindows

93

Próbuję dodać wiele znaczników, każdy z własnym oknem informacyjnym, które pojawia się po kliknięciu. Mam problem z wyświetlaniem okien informacyjnych, ale kiedy próbuję, pojawia się tylko jeden znacznik bez okienka informacyjnego.

Dzięki, daj mi znać, jeśli potrzebujesz więcej informacji

<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
źródło
2
Używaj tylko JEDNEGO okna informacyjnego utworzonego przed znacznikami. Wtedy zdarzenie kliknięcia dla każdego znacznika będzie działać poprawnie. Zmienna contentwewnątrz twojego detektora zdarzeń nie jest zdefiniowana w tej funkcji.
js1568
1
Tak jak krótki komentarz, jeśli dobrze sformatujesz kod, będzie o wiele łatwiejszy do odczytania.
paullb
1
@paullb Sformatuję to ponownie, napisałem to pytanie jak 4 lata temu, kiedy byłem bardziej nowicjuszem :)
stacktraceyo
Sprawdź ten samouczek, aby wyświetlić informacje o wielu znacznikachWindow z kliknięciem i najechaniem kursorem freakyjolly.com/…
Code Spy

Odpowiedzi:

206

Możesz użyć zamknięcia. Po prostu zmodyfikuj swój kod w ten sposób:

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

Oto DEMO

Inżynier
źródło
2
To działa, ale jak zmienić kod, aby po kliknięciu innego znacznika otworzyło się okno informacyjne, które zastępuje okno informacyjne, które było wcześniej otwarte, zamiast ciągle otwierać kolejne okna informacyjne za każdym razem, gdy klikam inny znacznik?
railsy
to działa! ale czy ktoś może mi wyjaśnić, dlaczego to działa w ten sposób?
Lakshay
1
@Lakshay Możesz przeczytać o podobnym problemie tutaj
Inżynier
1
w takim przypadku, jak zamknąć okno informacyjne po kliknięciu poza mapą?
Rohit Tigga
Jak zamknąć okno infowindow? infowindow.close()nie działa.
mokiSRB
10

Oto fragment kodu, który na pewno zadziała. Możesz odwiedzić poniższe łącze, aby uzyskać szczegółowe informacje na temat pracy jsFiddle i wyjaśnienia. Jak zlokalizować wiele adresów na mapach Google z doskonałym powiększeniem

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
źródło
6

Link do źródła

Demo Link

Poniższy kod pokaże wiele znaczników z InfoWindow . Można kod Odkomentuj pokazać informacji na Hover oraz

wprowadź opis obrazu tutaj

            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();
            }
Code Spy
źródło
Warunkiem takiego rozwiązania jest wykorzystanie const dla infowindow i marker, inaczej to nie działa ..
Jim Jimson
2

Jeśli chcesz również powiązać zamykanie okna informacyjnego z jakimś zdarzeniem, spróbuj czegoś takiego

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));
Vinayak Kaniyarakkal
źródło
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);

 });

 }
}

Następnie przejdź var infowindow = new google.maps.InfoWindow()do initialize()funkcji:

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
źródło
1
google.maps.events.AddListenerpowinno byćgoogle.maps.event.addListener
Patrick Yan
Otrzymuję, TypeError: map.infowindow is undefinedjeśli var infowindow = new google.maps.InfoWindow();
dołączę