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

Question

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 ?

Answer 1

Infowindow est une variable locale et la fenêtre n'est pas disponible au moment de close()

var latlng = new google.maps.LatLng(-34.397, 150.644);
var infowindow = null;

...

google.maps.event.addListener(marker, 'click', function() {
    if (infowindow) {
        infowindow.close();
    }
    infowindow = new google.maps.InfoWindow();
    ...
});
...

Answer 2

Déclarer des variables globales :

var mapOptions;
var map;
var infowindow;
var marker;
var contentString;
var image;

Sur intialize utiliser la carte addEvent méthode :

google.maps.event.addListener(map, 'click', function() {
    if (infowindow) {
        infowindow.close();
    }
});

Answer 3

Pour les boucles qui créent infowindows de manière dynamique, déclarez un variable globale

var openwindow;

et ensuite dans le addListener (qui se trouve dans la boucle) :

google.maps.event.addListener(marker<?php echo $id; ?>, 'click', function() {
if(openwindow){
    eval(openwindow).close();
}
openwindow="myInfoWindow<?php echo $id; ?>";
myInfoWindow<?php echo $id; ?>.open(map, marker<?php echo $id; ?>);
});

Answer 4

J'ai un exemple de mon code qui pourra peut-être m'aider. J'ai défini un seul objet infowindow à l'échelle globale. Puis j'ai utilisé setContent() pour définir le contenu avant de le montrer.

  let map;
  let infowindow;
  let dataArr = [
    {
      pos:{lat: -34.397, lng: 150.644},
      content: 'First marker'
    },
    {
      pos:{lat: -34.340, lng: 150.415},
      content: 'Second marker'
    }
  ];

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
    // Set infowindow object to global varible
    infowindow = new google.maps.InfoWindow();
    loadMarker();
  }

  function loadMarker(){
    dataArr.forEach((obj, i)=>{
      let marker = new google.maps.Marker({
        position: obj.pos,
        map: map
      });
      marker.addListener('click', function() {
        infowindow.close()
        infowindow.setContent(`<div> ${obj.content} </div>`)
        infowindow.open(map, marker);
      });
    })
  }

Answer 5

Ecrivez cette ligne ci-dessous après le début de la balise script.

previous_Window=null;

Cela fonctionnera à 100%. en utilisant ce code

 radius= circle.getRadius()/1000;
 radius_mile= circle.getRadius()/1609.344;

 newRadious = 'This Circle Radius Covers Approx ' + radius.toFixed(1) + ' Km'+' <br> This circle Radius Covers Approx '+ radius_mile.toFixed(1)+ 'Miles';
            var infoWindow= new google.maps.InfoWindow({
              content: newRadious
              });
 infoWindow.setContent(newRadious)
 infoWindow.setPosition(circle.getCenter());
 if (previous_Window) 
  previous_Window.close();

  infoWindow.open(map);
  previous_Window=infoWindow;