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

J'avais une boucle dynamique qui créait le infowindows et des marqueurs en fonction du nombre d'entrées dans le CMS, je ne voulais donc pas créer un nouveau fichier InfoWindow() à chaque clic sur un événement et l'enliser dans des demandes, si jamais cela se produisait. Au lieu de cela, j'ai essayé de savoir ce que les infowindow pour chaque instance allait être hors du nombre d'emplacements que j'avais, et demander à Maps de les fermer tous avant d'ouvrir le bon emplacement.

Mon tableau de lieux s'appelait locations, donc le PHP que j'ai mis en place est le suivant antes de l'initialisation des cartes pour obtenir mon infowindow les noms des variables était :

for($k = 0; $k < count($locations); $k++) {
        $infowindows[] = 'infowindow' . $k; 
} 

Ensuite, après avoir initialisé la carte et ainsi de suite, dans le script j'avais un PHP foreach boucle créant l'info dynamique Windows en utilisant un compteur :

//...javascript map initilization
<?php 
$i=0;
foreach($locations as $location) {

    ..//get latitudes, longitude, image, etc...

echo 'var mapMarker' . $i . ' = new google.maps.Marker({
          position: myLatLng' . $i . ',
          map: map,
          icon: image
      });';

echo 'var contentString' . $i . ' = "<h1>' . $title[$i] . '</h1><h2>' . $address[$i] . '</h2>' . $content[$i] .         '";'; 
echo 'infowindow' . $i . ' = new google.maps.InfoWindow({ ';
echo '    content: contentString' . $i . '
          });';

echo 'google.maps.event.addListener(mapMarker' . $i . ', "click", function() { ';   
    foreach($infowindows as $window) {  
        echo $window . '.close();'; 
    }
        echo 'infowindow' . $i . '.open(map,mapMarker'. $i . ');
      });';

$i++; 
}
?>
...//continue with Maps script... 

Donc, le fait est qu'avant d'appeler l'ensemble de la carte script, j'avais un tableau avec les noms qui, je le savais, allaient être affichés quand un InfoWindow() a été créé, comme infowindow0, infowindow1, infowindow2, etc...

Ensuite, sur le click pour chaque marqueur, l'événement foreach loop passe en revue et dit de les fermer tous avant de passer à l'étape suivante qui consiste à les ouvrir. Le résultat ressemble à ça :

google.maps.event.addListener(mapMarker0, "click", function() {
    infowindow0.close();
    infowindow1.close();
    infowindow2.close();
    infowindow0.open(map,mapMarker0);
}

C'est juste une façon différente de faire les choses, je suppose... mais j'espère que cela aidera quelqu'un.

Answer 2

Je vous encourage à essayer goMap jQuery lorsque vous travaillez avec Google Maps. Pour ce type de situation, vous pouvez définir hideByClick sur true lors de la création des marqueurs :

$(function() { 
    $("#map").goMap({ 
        markers: [{  
            latitude: 56.948813, 
            longitude: 24.704004, 
            html: { 
                content: 'Click to marker', 
                popup:true 
            } 
        },{  
            latitude: 54.948813, 
            longitude: 21.704004, 
            html: 'Hello!' 
        }], 
        hideByClick: true 
    }); 
}); 

Ce n'est qu'un exemple, il offre de nombreuses fonctionnalités comme le regroupement de marqueurs et la manipulation des fenêtres d'information.

Answer 3

Vous devriez avoir à cliquer sur votre carte - $('#map-selector').click();

Answer 4

Lorsqu'il s'agit de grappes de marqueurs, celle-ci a fonctionné pour moi.

var infowindow = null;

google.maps.event.addListener(marker, "click", function () {

        if (infowindow) {
            infowindow.close();
        }
        var markerMap = this.getMap();
        infowindow = this.info;
        this.info.open(markerMap, this);

    });

Answer 5

J'ai passé une heure avec des maux de tête à essayer de fermer l'infoWindow ! Ma dernière option (qui fonctionne) a été de fermer l'infoWindow avec un SetTimeout (quelques secondes). Ce n'est pas la meilleure solution... mais elle fonctionne facilement.

    marker.addListener('click', function() {
    infowindow.setContent(html);
    infowindow.open(map, this);

    setTimeout(function(){
        infowindow.close();
    },5000);

});