web-dev-qa-db-de.com

Markierungsinhalt (infoWindow) Google Maps

Ich versuche, infoWindow zu mehreren Markierungen auf einer Google Map hinzuzufügen. Als nächstes möchte ich ein infoWindow erhalten, in dem die letzte Adresse angezeigt wird, die Sie im Array auf allen Markierungen sehen können. Der Code, den ich unten eingefügt habe, funktioniert nicht. Ich erhalte die Meldung "Uncaught TypeError: Die Eigenschaft '4' von undefined kann nicht gelesen werden". Ich bin mir sicher, dass dies ein Scope-Problem ist, aber ich gehe hier im Kreis herum und könnte etwas Hilfe gebrauchen:

var hotels = [
            ['ibis Birmingham Airport', 52.452656, -1.730548, 4, 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3AW','(+44)1217805800','(+44)1217805810','[email protected]','http://www.booknowaddress.com'],
            ['ETAP Birmingham Airport', 52.452527, -1.731644, 3, 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3QL','(+44)1217805858','(+44)1217805860','[email protected]','http://www.booknowaddress.com'],
            ['ibis Birmingham City Centre', 52.475162, -1.897208, 2, 'Ladywell Walk<br />Birmingham<br />B5 4ST','(+44)1216226010','(+44)1216226020','[email protected]','http://www.booknowaddress.com']
        ];

        for (var i = 0; i < hotels.length; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(hotels[i][1], hotels[i][2]),
                map: map,
                icon: image,
                title: hotels[i][0],
                zIndex: hotels[i][2]
            });

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

            google.maps.event.addListener(marker, 'click', function () {
                var markerContent = hotels[i][4];
                infoWindow.setContent(markerContent);
                infoWindow.open(map, this);
            });
        }

Danke im Voraus.

29
DarrylGodden

Wir haben dieses Problem gelöst, obwohl wir anscheinend nicht dachten, dass der addListener außerhalb von for einen Unterschied bewirken würde. Hier ist die Antwort:

Erstellen Sie eine neue Funktion mit Ihren Informationen für das InfoWindow:

function addInfoWindow(marker, message) {

            var infoWindow = new google.maps.InfoWindow({
                content: message
            });

            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.open(map, marker);
            });
        }

Rufen Sie dann die Funktion mit der Array-ID und dem Marker auf, den Sie erstellen möchten:

addInfoWindow(marker, hotels[i][3]);
49
DarrylGodden

Obwohl diese Frage bereits beantwortet wurde, halte ich diesen Ansatz für besser: http://jsfiddle.net/kjy112/3CvaD/ Auszug aus dieser Frage auf StackOverFlow Google Maps - Open Marker Infowindow) gegeben die Koordinaten :

Jeder Marker erhält einen "Infofenster" -Eintrag:

function createMarker(lat, lon, html) {
    var newmarker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lon),
        map: map,
        title: html
    });

    newmarker['infowindow'] = new google.maps.InfoWindow({
            content: html
        });

    google.maps.event.addListener(newmarker, 'mouseover', function() {
        this['infowindow'].open(map, this);
    });
}
32
BenC