Hinzufügen einer Infobox zu GoogleMaps?

Question

Ich versuche eine Infobox zu einer Reihe von Pins auf einer Google-Karte hinzuzufügen.

Ich habe die Infobox zur Arbeit vorher - JSfiddle.

Aber ich habe jetzt den Code geändert, um ein Dropdown-Menü zu enthalten. Ich habe versucht, die Infoboxen wieder hinzuzufügen, aber es funktioniert nicht und ich verstehe nicht, warum es nicht tut. JSfiddle. Ich habe den Code für die Infoboxen kopiert und eingefügt, überprüft, dass die Variablennamen immer noch übereinstimmen, und dass der Code in der gleichen Reihenfolge ist.

Der folgende Code ist, wo der Marker der Karte hinzugefügt wird und ich versuche, eine Infobox hinzuzufügen. Die Funktion addMarker befindet sich innerhalb meiner Initialisierungsfunktion. Und var infowindow ist unter der Initialisierungsfunktion gesetzt.

function addMarker(feature) { 
    var marker = new google.maps.Marker({ 
    position: feature.position, 
    icon: feature.icon, 
    map: map, 
    size: 20, 
    title: name, 
    draggable: false, 
    //animation: google.maps.Animation.DROP 
    }); 

    google.maps.event.addListener(marker, 'click', (function (marker) {return function() { 
     var Infocontent = feature.desc; 
     infowindow.setContent(Infocontent); 
     infowindow.open(map, marker); //'mouseover' 
     } 
    })(marker)); 
    } 




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

Darf mir bitte jemand sagen, wo ich falsch gelaufen bin?

Answer 1

Ich habe gerade Ihren Code aktualisiert, indem ich eine neue Geige erstellt habe, und jetzt wird Infowindow angezeigt. Ich habe gerade Ihren Infofenster-Code innerhalb der Listener-Definition verschoben. Bitte überprüfen

google.maps.event.addListener(marker, 'click', (function (marker) {return function() { 
    console.log('called'); 
     var Infocontent = feature.desc; 
     infowindow = new google.maps.InfoWindow(); 
     infowindow.setContent(Infocontent); 
     infowindow.open(map, marker); //'mouseover' 
     } 
    })(marker)); 

JSFiddle