Google Maps API Mehrere Marker mit Infofenstern

90

Ich versuche, mehrere Marker mit jeweils einem eigenen Infofenster hinzuzufügen, das beim Klicken angezeigt wird. Ich habe Probleme damit, dass die Infofenster angezeigt werden. Wenn ich es versuche, wird entweder nur ein Marker ohne Infofenster angezeigt.

Vielen Dank, lassen Sie mich wissen, wenn Sie weitere Informationen benötigen

<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>

— Stacktraceyo
quelle

2

Verwenden Sie nur EIN Infofenster, das vor den Markierungen erstellt wird. Dann funktioniert Ihr Klickereignis für jeden Marker korrekt. Die Variable contentin Ihrem Ereignis-Listener ist in dieser Funktion nicht definiert.

— js1568

1

Nur als kurzer Kommentar: Wenn Sie Ihren Code gut formatieren, ist er viel einfacher zu lesen.

— Paullb

1

@paullb Ich werde es neu formatieren, ich schrieb diese Frage wie vor 4 Jahren, als ich eher ein Neuling war :)

— stacktraceyo

Überprüfen Sie dieses Tutorial, um mehrere Marker infoWindow mit Klick und Schwebeflug freakyjolly.com/…

— Code Spy

202

Sie könnten einen Verschluss verwenden. Ändern Sie einfach Ihren Code wie folgt:

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

Hier ist die DEMO

— Ingenieur
quelle

2

Ich habe das zum Laufen gebracht, aber wie würde ich den Code so ändern, dass beim Klicken auf einen anderen Marker ein Infofenster geöffnet wird, das das zuvor geöffnete Infofenster ersetzt, anstatt jedes Mal, wenn ich auf einen anderen Marker klicke, kontinuierlich weitere Infofenster zu öffnen?

— Railsy

Es klappt! Aber kann mir jemand erklären, warum es so funktioniert?

— Lakshay

1

@ Lakshay Sie können über ähnliche Probleme hier

— Ingenieur

1

Wie sollte man in diesem Fall das Infofenster schließen, wenn man außerhalb der Karte klickt?

— Rohit Tigga

Wie schließe ich das Fenster? infowindow.close()arbeite nicht

— MokiSRB

10

Hier ist das Code-Snippet, das sicher funktionieren wird. Sie können den folgenden Link für die Arbeit mit jsFiddle und die ausführliche Erklärung besuchen . So finden Sie mehrere Adressen auf Google Maps mit perfektem Zoom

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
quelle

4

Quelle Link -

Demo Link

Der folgende Code zeigt mehrere Marker mit InfoWindow . Sie können Kommentar- Code Info auf zeigen , Hover auch

            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
quelle

Eine Voraussetzung für diese Lösung ist die Verwendung von const für Infowindow und Marker, sonst funktioniert es nicht ..

— Jim Jimson

2

Wenn Sie das Schließen des Infofensters auch an ein Ereignis binden möchten, versuchen Sie Folgendes

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
quelle

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);

 });

 }
}

Gehen Sie dann var infowindow = new google.maps.InfoWindow()zur initialize()Funktion:

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
quelle

1

google.maps.events.AddListenersollte seingoogle.maps.event.addListener

— Patrick Yan

Ich bekomme, TypeError: map.infowindow is undefinedwenn ich var infowindow = new google.maps.InfoWindow();in meine initialize () -Funktion

— einbeziehe