73 votes

Fermer toutes les infofenêtres dans l'API Google Maps v3

Je suis occupé avec un script qui va faire une toile google maps sur mon site web, avec plusieurs marqueurs. Je veux que lorsque vous cliquez sur un marqueur, une infowindow s'ouvre. J'ai fait cela, et le code est à l'heure actuelle :

 var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    function addMarker(map, address, title) {
     geocoder = new google.maps.Geocoder();
     geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
     position: results[0].geometry.location,
              map: map,
              title:title
    });
    google.maps.event.addListener(marker, 'click', function() {
     var infowindow = new google.maps.InfoWindow();
            infowindow.setContent('<strong>'+title + '</strong><br />' + address);
             infowindow.open(map, marker);

          });
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
     });
    }
    addMarker(map, 'Address', 'Title');
 addMarker(map, 'Address', 'Title');

Cela fonctionne à 100%. Mais maintenant je veux que lorsqu'une infowindow est ouverte, et que vous voulez ouvrir la seconde, la première se ferme automatiquement. Mais je n'ai pas trouvé de moyen de le faire. infowindow.close() ; ne m'aide pas. Quelqu'un a-t-il un exemple ou une solution à ce problème ?

0voto

Tabetha Moe Points 157

Si vous avez plusieurs marqueurs, vous pouvez utiliser cette solution simple pour fermer un marqueur précédemment ouvert lorsque vous cliquez sur un nouveau marqueur :

var infowindow = new google.maps.InfoWindow({
                maxWidth: (window.innerWidth - 160),
                content: content
            });

            marker.infowindow = infowindow;
            var openInfoWindow = '';

            marker.addListener('click', function (map, marker) {
                if (openInfoWindow) {
                    openInfoWindow.close();
                }
                openInfoWindow = this.infowindow;
                this.infowindow.open(map, this);
            });

0voto

rwilson04 Points 366

J'ai quelque chose comme ce qui suit

function initMap()
{
    //...create new map here
    var infowindow;
    $('.business').each(function(el){
        //...get lat/lng
        var position = new google.maps.LatLng(lat, lng);
        var content = "contents go here";
        var title = "titleText";
        var openWindowFn;
        var closure = function(content, position){.
            openWindowFn = function()
            {
                if (infowindow)
                {
                    infowindow.close();
                }
                infowindow = new google.maps.InfoWindow({
                    position:position,
                    content:content
                });
                infowindow.open(map, marker);
            }
        }(content, position);
        var marker = new google.maps.Marker({
            position:position,
            map:map,
            title:title.
        });
        google.maps.event.addListener(marker, 'click', openWindowFn);
    }
}

D'après ce que j'ai compris, l'utilisation d'une fermeture comme celle-ci permet de capturer les variables et leurs valeurs au moment de la déclaration de la fonction, plutôt que de s'appuyer sur des variables globales. Ainsi, lorsque openWindowFn est appelé plus tard, sur le premier marqueur par exemple, l'élément content y position ont les valeurs qu'elles avaient lors de la première itération dans le cadre de la each() fonction.

Je ne sais pas vraiment comment openWindowFn a infowindow dans sa portée. Je ne suis pas non plus certain de faire les choses correctement, mais cela fonctionne, même avec plusieurs cartes sur une page (chaque carte a une infowindow ouverte).

Si quelqu'un a des idées, merci de les commenter.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X