Google Maps API plusieurs marqueurs avec Infowindows

91

J'essaie d'ajouter plusieurs marqueurs, chacun avec sa propre fenêtre d'information qui apparaît lorsque vous cliquez dessus. J'ai du mal à faire apparaître les infowindows, quand j'essaye, il ne montre qu'un seul marqueur sans infowindow.

Merci, faites-moi savoir si vous avez besoin de plus d'informations

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0
}

#map_canvas {
    height: 100%
}
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false">
</script>
<script type="text/javascript">

var locations = [
    ['loan 1', 33.890542, 151.274856, 'address 1'],
    ['loan 2', 33.923036, 151.259052, 'address 2'],
    ['loan 3', 34.028249, 151.157507, 'address 3'],
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
    ['loan 5', 33.950198, 151.259302, 'address 5']
];

function initialize() {

    var myOptions = {
        center: new google.maps.LatLng(33.890542, 151.274856),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map, locations)
}


function setMarkers(map, locations) {

    var marker, i
    for (i = 0; i < locations.length; i++) {

        var loan = locations[i][0]
        var lat = locations[i][1]
        var long = locations[i][2]
        var add = locations[i][3]

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({
            map: map, title: loan, position: latlngset
        });
        map.setCenter(marker.getPosition())

        var content = "Loan Number: " + loan + '</h3>' + "Address: " + add

        var infowindow = new google.maps.InfoWindow()

        google.maps.AddListener(marker, 'click', function (map, marker) {
            infowindow.setContent(content)
            infowindow.open(map, marker)
        });
    }
}


</script>
</head>
<body onload="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
javascript  google-maps  google-maps-api-3  google-maps-markers  infowindow 
— stacktraceyo
source
2
N'utilisez qu'une seule infowindow créée avant les marqueurs. Ensuite, votre événement de clic pour chaque marqueur fonctionnera correctement. La variable à l' contentintérieur de votre écouteur d'événements n'est pas définie dans cette fonction.
— js1568
1
Juste un petit commentaire, si vous formatez bien votre code, il est beaucoup plus facile à lire.
— paullb
1
@paullb Je vais le reformater, j'ai écrit cette question comme il y a 4 ans quand j'étais plus novice :)
— stacktraceyo
Consultez ce tutoriel pour afficher plusieurs informations sur les marqueursWindow avec clic et survol freakyjolly.com
— Code Spy

Réponses:

203

Vous pouvez utiliser une fermeture. Modifiez simplement votre code comme ceci:

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

Voici la DEMO

— Ingénieur
source
2
Cela fonctionne, mais comment changer le code pour que lorsque je clique sur un autre marqueur, il ouvre une infowindow qui remplace l'infowindow qui était précédemment ouverte, au lieu d'ouvrir continuellement plus infowindows chaque fois que je clique sur un autre marqueur?
— railsy
Ça marche! mais quelqu'un peut-il m'expliquer pourquoi cela fonctionne-t-il de cette façon?
— Lakshay
1
@Lakshay Vous pouvez lire un problème similaire ici
— Ingénieur
1
dans ce cas, comment fermer l'infowindow lorsque vous cliquez en dehors de la carte?
— Rohit Tigga
Comment fermer l'infowindow? infowindow.close()ne marche pas.
— mokiSRB
10

Voici l'extrait de code qui fonctionnera à coup sûr. Vous pouvez visiter ci-dessous lien - pour travailler jsFiddle et expliquer en détail. Comment localiser plusieurs adresses sur Google Maps avec un zoom parfait

var infowindow = new google.maps.InfoWindow();  
google.maps.event.addListener(marker, 'mouseover', (function(marker) {  
           return function() {  
               var content = address;  
               infowindow.setContent(content);  
               infowindow.open(map, marker);  
           }  
         })(marker));
— evaipar
source
5

Lien source

Lien de démonstration

Le code suivant affichera plusieurs marqueurs avec InfoWindow . Vous pouvez le code décommenter pour afficher Infos sur Hover et

entrez la description de l'image ici

            var map;
            var InforObj = [];
            var centerCords = {
                lat: -25.344,
                lng: 131.036
            };
            var markersOnMap = [{
                    placeName: "Australia (Uluru)",
                    LatLng: [{
                        lat: -25.344,
                        lng: 131.036
                    }]
                },
                {
                    placeName: "Australia (Melbourne)",
                    LatLng: [{
                        lat: -37.852086,
                        lng: 504.985963
                    }]
                },
                {
                    placeName: "Australia (Canberra)",
                    LatLng: [{
                        lat: -35.299085,
                        lng: 509.109615
                    }]
                },
                {
                    placeName: "Australia (Gold Coast)",
                    LatLng: [{
                        lat: -28.013044,
                        lng: 513.425586
                    }]
                },
                {
                    placeName: "Australia (Perth)",
                    LatLng: [{
                        lat: -31.951994,
                        lng: 475.858081
                    }]
                }
            ];

            window.onload = function () {
                initMap();
            };

            function addMarkerInfo() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

                    const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map
                    });

                    const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

                    marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });
                    // marker.addListener('mouseover', function () {
                    //     closeOtherInfo();
                    //     infowindow.open(marker.get('map'), marker);
                    //     InforObj[0] = infowindow;
                    // });
                    // marker.addListener('mouseout', function () {
                    //     closeOtherInfo();
                    //     infowindow.close();
                    //     InforObj[0] = infowindow;
                    // });
                }
            }

            function closeOtherInfo() {
                if (InforObj.length > 0) {
                    InforObj[0].set("marker", null);
                    InforObj[0].close();
                    InforObj.length = 0;
                }
            }

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: centerCords
                });
                addMarkerInfo();
            }
— Espion de code
source
Une condition requise pour cette solution est l'utilisation de const pour l'infowindow et le marqueur, sinon cela ne fonctionne pas.
— Jim Jimson
2

Si vous souhaitez également lier la fermeture de l'infowindow à un événement, essayez quelque chose comme ceci

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
        windows.push(infowindow)
        google.maps.event.addListener(map,'click', function(){ 
            infowindow.close();
        }); 
    };
})(marker,content,infowindow));
— Vinayak Kaniyarakkal
source
0 
function setMarkers(map,locations){

for (var i = 0; i < locations.length; i++)
 {  

 var loan = locations[i][0];
 var lat = locations[i][1];
 var long = locations[i][2];
 var add =  locations[i][3];

 latlngset = new google.maps.LatLng(lat, long);

 var marker = new google.maps.Marker({  
          map: map, title: loan , position: latlngset  
 });
 map.setCenter(marker.getPosition());


 marker.content = "<h3>Loan Number: " + loan +  '</h3>' + "Address: " + add;


 google.maps.events.addListener(marker,'click', function(map,marker){
          map.infowindow.setContent(marker.content);
          map.infowindow.open(map,marker);

 });

 }
}

Puis passez var infowindow = new google.maps.InfoWindow()à la initialize()fonction:

function initialize() {

    var myOptions = {
      center: new google.maps.LatLng(33.890542, 151.274856),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);
    map.infowindow = new google.maps.InfoWindow();

    setMarkers(map,locations)

  }
— js1568
source
1
google.maps.events.AddListenerdevrait êtregoogle.maps.event.addListener
— Patrick Yan
Je reçois TypeError: map.infowindow is undefinedsi j'inclus à l' var infowindow = new google.maps.InfoWindow();intérieur de ma fonction initialize ()
— invot
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.