Le contenu du marqueur (infoWindow) Google Maps

J'essaie d'ajouter de l'infoWindow à plusieurs marqueurs sur une Carte Google. Le plus proche que je viens d'obtenir une infoWindow pour afficher la dernière adresse vous pouvez le voir dans le tableau, sur tous les marqueurs. Le peu de code que j'ai collé ci-dessous ne fonctionne pas, j'obtiens un "Uncaught TypeError: Cannot read property '4' undefined". Je suis sûr que c'est un problème de portée, mais je vais en rond ici et pourrait faire avec un peu d'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'avance.

InformationsquelleAutor DarrylGodden | 2011-05-03
  1. 49

    Nous avons résolu ce problème, bien que nous ne pensions pas avoir le addListener à l'extérieur de la pour des ne fait aucune différence, il me semble. Voici la réponse:

    Créer une nouvelle fonction de 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);
            });
        }

    Puis appeler la fonction avec la matrice ID et le marqueur que vous souhaitez créer:

    addInfoWindow(marker, hotels[i][3]);
    • J'ai regardé à travers un grand nombre de réponses à des variantes de cette question. Votre réponse était la plus claire. Je vous remercie.
    • Merci ... pour votre info au sujet de l'infowindow.
    • Quelle est l'info de la variable pour?
    • NB : La raison n'est pas de travail à l'origine, c'est que vous avez été la création d'un écouteur d'événement de rappel qui aurait eu une autre portée. Bien qu'il faisait un béton "je", je soupçonne que c'était encore en train d'essayer d'accéder à "hôtels" à partir de la fonction de rappel, mais depuis l'hôtel était un 'var' il est uniquement accessible dans votre fonction parent.
    • Cette cloué! merci 🙂
    InformationsquelleAutor DarrylGodden
  2. 32

    Que cette question a déjà été posée, je pense que cette approche est la meilleure :
    http://jsfiddle.net/kjy112/3CvaD/ extrait de cette question sur StackOverFlow google maps - ouvrir marqueur de l'infowindow donné les coordonnées:

    Chaque marqueur est un "infowindow" entrée :

    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);
    });
}
    • +1 cela fonctionne si bien!!!! Vous ne pouvez pas l'initialiser avec une propriété personnalisée de l'infowindow, MAIS apparemment, il vous suffit de créer le "infowindow" la clé... Content que ça fonctionne. Merci!
    • Plus belle réponse 🙂
    • Peut-on personnaliser le style d'info-bulle?
    • voir developers.google.com/maps/documentation/javascript/reference/... n'a pas essayer, mais vous pouvez injecter du tout au style du HTML dans le contenu et le style avec CSS. Vous pouvez changer l'icône avec le marquage, voir developers.google.com/maps/documentation/javascript/reference/...
    • Est-il possible d'afficher pic ainsi que le nom sur le vol stationnaire pour ce marqueur particulier?
    InformationsquelleAutor BenC