web-dev-qa-db-fra.com

Contenu des marqueurs (infoWindow) Google Maps

J'essaie d'ajouter infoWindow à plusieurs marqueurs sur une carte Google. Le plus proche que je suis venu est d'obtenir une infoWindow pour afficher la dernière adresse que vous pouvez voir dans le tableau, sur tous les marqueurs. Le morceau de code que j'ai collé ci-dessous ne fonctionne pas, j'obtiens une "TypeError non capturée: Impossible de lire la propriété" 4 "de non défini". Je suis sûr que c'est un problème de portée, mais je tourne en rond ici et je pourrais le faire avec de l'aide:

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

Merci d’anticipation.

javascriptgoogle-mapsgoogle-maps-markersinfowindow
29
DarrylGodden

Nous avons résolu ce problème, même si nous ne pensions pas que l'addListener en dehors de for ferait une différence, semble-t-il. Voici la réponse:

Créez une nouvelle fonction avec vos informations pour l'infoWindow en elle:

function addInfoWindow(marker, message) {

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

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

Appelez ensuite la fonction avec l'ID du tableau et le marqueur que vous souhaitez créer:

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

Bien que cette question ait déjà reçu une réponse, je pense que cette approche est meilleure: http://jsfiddle.net/kjy112/3CvaD/ extrait de cette question sur StackOverFlow google maps - open marker infowindow étant donné les coordonnées :

Chaque marqueur reçoit une entrée "infowindow":

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