web-dev-qa-db-fra.com

Fermer toutes les interfaces dans Google Maps API v3

Je suis occupé par un script qui créera un canevas Google Maps sur mon site Web, avec plusieurs marqueurs. Je veux que lorsque vous cliquez sur un marqueur, une infowindow s'ouvre. Je l'ai fait, et le code est en ce moment:

 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 quand une infowindow est ouverte et que vous voulez ouvrir la seconde, la première se ferme automatiquement. Mais je n'ai pas trouvé le moyen de le faire. infowindow.close (); ne va pas aider. Quelqu'un a-t-il un exemple ou une solution à ce problème?

javascriptgoogle-maps-api-3
63
Tom

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

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();
    ...
});
...
136
please delete me

Déclarez les variables globales:

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

Dans intialize, utilisez la méthode addEvent de la carte:

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

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

var openwindow;

puis dans l'appel addListenerfunction (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; ?>);
});
6
Binod

J'avais une boucle dynamique qui créait la variable infowindows et des marqueurs en fonction du nombre d'entrées dans le système de gestion de contenu. Je ne voulais donc pas créer une nouvelle InfoWindow() à chaque clic sur un événement et l'enrayer avec des demandes, le cas échéant. Au lieu de cela, j'ai essayé de savoir quelle variable infowindow pour chaque instance allait être hors du nombre défini d'emplacements que j'avais, puis Inviter Maps à toutes les fermer avant d'ouvrir le bon.

Mon tableau de localisations s'appelait localisations, donc le PHP j'ai configuré before l'initialisation réelle des cartes pour obtenir mes noms de variable infowindow était:

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

Ensuite, après l'initialisation de la carte et ainsi de suite, dans le script, j'avais une boucle PHP foreach créant les fenêtres d'informations dynamiques à l'aide d'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 du script de carte, j'avais un tableau avec les noms dont je savais qu'ils seraient sortis lors de la création d'une InfoWindow(), telle que infowindow0, infowindow1, infowindow2, etc....

Ensuite, pour l'événement click de chaque marqueur, la boucle foreach passe et dit de les fermer tous avant de poursuivre avec la prochaine étape de leur ouverture. Cela ressemble à ceci:

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

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

1
RCNeil

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

0
Slava

Lorsqu'il s'agit de groupes de marqueurs, celui-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);


    });
0
Daniel Badro

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);
    }
}

À mon sens, l’utilisation d’une telle fermeture permet de capturer des 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, par exemple sur le premier marqueur, les variables content et position ont les valeurs qu’elles ont utilisées lors de la première itération de la fonction each(). 

Je ne suis pas vraiment sûr de savoir comment openWindowFn a infowindow dans sa portée. De plus, je ne suis pas sûr de bien faire les choses, mais cela fonctionne, même avec plusieurs cartes sur une page (chaque carte reçoit une infowindow ouverte). 

Si quelqu'un a des idées, veuillez commenter. 

0
rwilson04

J'ai un échantillon de mon code qui peut peut-être aider. Je n'avais défini qu'un seul objet infowindow au niveau global. Ensuite, utilisez 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);
      });
    })
  }
0
Joe

Je vous encourage à essayer le plug-in goMap jQuery lorsque vous utilisez Google Maps. Pour ce genre de situation, vous pouvez définir hideByClick sur true lors de la création de 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 propose de nombreuses fonctionnalités telles que le regroupement de marqueurs et la manipulation de fenêtres d’information.

0
Steamer

J'ai eu mal à la tête pendant une heure à essayer de fermer infoWindow! facilement 

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

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

});
0
gtamborero