google maps Infofenster schließen funktioniert nicht

Ich habe eine google-Karte enthalten, die in diese Geige

Wenn Sie klicken Sie auf die pins, die Sie popup-einige Informationen, wie erwartet, und wenn du auf das x schließt das Infofenster.

Jedoch, wenn ich auf den ersten pin, dann klicken Sie auf ' weitere pins (ohne auf die x) die infowindows nur halten poping-up, ohne zu entfernen die andere. wie kann ich restructre mein code, damit es funktioniert?

Html

    <div id="map_canvas"></div>

Stil

    #map_canvas {
        float: left;
        height: 565px;
        width: 100%;
    }
    #content {
        min-width: 320px;
    }

JS

    var mylatlongs = [
                        {"rank":1,"name":"name 1","lat":"-25.901820984476252","lng":"135"},
                        {"rank":2,"name":"name 2","lat":"-25.901820984476252","lng":"135.05"},
                        {"rank":3,"name":"name 3","lat":"-25.901820984476252","lng":"135.025"}
                    ];
    var infowindow = null;
    jQuery(function() {
            var StartLatLng = new google.maps.LatLng(mylatlongs[0]['lat'], mylatlongs[0]['lng']);
            var mapOptions = {
                center: StartLatLng,
                streetViewControl: false,
                panControl: false,
                maxZoom:17,
                zoom : 13,
                zoomControl:true,
                zoomControlOptions: {
                    style:google.maps.ZoomControlStyle.SMALL
                }
            };

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        jQuery.each( mylatlongs, function(i, m) {
            var StartLatLng = new google.maps.LatLng(-25.901820984476252, 134.00135040279997);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(m.lat, m.lng),
                bounds: true,
                id : 'mk_' + m.rank,
                letter : m.index,
                map: map,
                title: m.name
            });

            google.maps.event.addListener(marker, 'click', function() {
                if (infowindow) {
                    infowindow.close();
                }
                infowindow.open(map,marker);
                position: new google.maps.LatLng(m.lat, m.lng);
            });

            var contentString = '<div id="content">'+
              '<div id="siteNotice">'+
              '</div>'+
              '<h1 id="firstHeading" class="firstHeading">'+ m.name + '</h1>'+
              '<div id="bodyContent">'+ (m.rank) +
              '</div>'+
              '</div>';

            var infowindow = new google.maps.InfoWindow({
              content: contentString
            });

        });
    });
InformationsquelleAutor ak85 | 2014-03-04
  1. 11

    Haben Sie ein info-Fenster für jeden marker, und eine lokale variable für jeden. Wenn Sie versuchen, schließen Sie die previosuly geöffnet info-Fenster, schließen Sie die eine, die gehört zu der angeklickten marker statt.

    Erstellen Sie eine einzelne info-Fenster außerhalb der Schleife, und legen Sie den Inhalt in das click-Ereignis, so dass es aktualisiert wird für die Markierung, wo Sie zeigen es:

            var infowindow = new google.maps.InfoWindow({
            content: ''
        });

        jQuery.each( mylatlongs, function(i, m) {
            var StartLatLng = new google.maps.LatLng(-25.901820984476252, 134.00135040279997);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(m.lat, m.lng),
                bounds: true,
                id : 'mk_' + m.rank,
                letter : m.index,
                map: map,
                title: m.name
            });

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

            var contentString = '<div id="content">'+
              '<div id="siteNotice">'+
              '</div>'+
              '<h1 id="firstHeading" class="firstHeading">'+ m.name + '</h1>'+
              '<div id="bodyContent">'+ (m.rank) +
              '</div>'+
              '</div>';

        });

    Demo: http://jsfiddle.net/Guffa/GSX6G/3/

    InformationsquelleAutor Guffa
  2. 1
            google.maps.event.addListener(marker, 'click', function() {
            if(marker.open){
                infowindow.close();
                marker.open = false;
            }
            else{
                infowindow.open(map,marker);
                marker.open = true;
            }
            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
                marker.open = false;
            });
        });
    • Während dieser code kann die Antwort auf die OP-Frage, ein paar Worte der Erklärung wäre es noch nützlich, um aktuellen und zukünftigen Leser.
    InformationsquelleAutor user1724001
  3. 0

    Definition globaler Objekte

    var infowindow;

    Aktualisiert diese demo

    • Das macht alle info-Fenster haben den gleichen text. Sie sind mit dem info-Fenster für die Letzte Markierung für alle Marker, und vergessen die anderen info-Fenster, das Sie erstellt haben.
    InformationsquelleAutor enginkartal
  4. 0

    Dies wird von google selbst.
    Durch die Schaffung der Infofenster außerhalb der event-handler stellen wir sicher, dass es existiert nur ein Infofenster zu einer Zeit. Hätten wir den code für die Erstellung der Infofenster innerhalb der event-handler, die wir erstellt haben ein neues Infofenster jedes mal, wenn der marker auf die geklickt wurde. Verlassen uns mit mehreren identischen InfoWindows übereinander.

    Dies bedeutet, wenn Sie erklären Infofenster innerhalb der event-handler wie:

     google.maps.event.addListener(marker, "click", function (e){
     var infoWindow = new google.maps.InfoWindow();
     infoWindow.setContent(props.content);
     infoWindow.open(map,marker);
 });

    Dann die infoWindows werden immer wieder auftauchen, wie Sie klicken Sie auf die Marker

    Allerdings, wenn Sie das Infofenster ist global wie:

     var infoWindow = new google.maps.InfoWindow();

 google.maps.event.addListener(marker, "click", function (e){

     infoWindow.setContent(props.content);
     infoWindow.open(map,marker);
 });

    ODER

    var infoWindow;
google.maps.event.addListener(marker, "click", function (e){
     infoWindow = new google.maps.InfoWindow();
     infoWindow.setContent(props.content);
     infoWindow.open(map,marker);
 });

    Dann haben Sie nur ein Infofenster aufpoppen

    InformationsquelleAutor Namah
Schreibe einen Kommentar