web-dev-qa-db-fra.com

Comment masquer les marqueurs Api de Google Maps avec jQuery

Bonjour, c’est peut-être une question idiote mais j’essaie de faire disparaître les marqueurs lorsque Le marqueur est situé correctement sur la carte, mais lorsque je clique dessus, il ne fait rien. Je me demandais pourquoi ça ne marche pas. Je vous remercie!

  <script type="text/javascript" src="jQuery.js"></script>
  <script type="text/javascript">

  $(document).ready(function(){
      var myOptions = {
        center: new google.maps.LatLng(40.1, -88.2),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      var myLatlng = new google.maps.LatLng(40.1, -88.2);
      var temp_marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title:"Hello World!"
        });

      console.log($(temp_marker));
      console.log(temp_marker);

      //temp_marker.click(function(){$(this).hide();});

      $(temp_marker).click(function(){console.log("click is working"); $(this).hide();});
          });
  </script>
</head>
<body>
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

jquerygoogle-mapsgoogle-maps-api-3
21
wayfare

temp_marker est un objet Javascript, pas un élément DOM. Pour attacher un écouteur au marqueur (l'API gère les spécificités de l'élément DOM à associer et comment), vous devez utiliser le système d'événements de l'API Google Maps, comme suit:

  google.maps.event.addListener(marker, 'click', function() {
    marker.setVisible(false); // maps API hide call
  });

Leur documentation: Google Maps Javascript API v3 - Evénements

55
Ben Regenspan

En développant les notes de Ben, ceci devrait aller où vous avez déclaré votre marqueur - par exemple:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: image
});
google.maps.event.addListener(beachMarker, 'click', function() {
  beachMarker.setVisible(false); // maps API hide call
});
}

Il m'a fallu des siècles pour essayer de comprendre cela. Grand crédit à Ben! Merci!

4
Liam McArthur

Ben vous a fourni la moitié de la réponse. Une fois que vous êtes capable de détecter l'événement de clic du marqueur, vous devez "masquer" ou supprimer le marqueur de la carte. La méthode standard pour faire cela avec Google Maps est de faire ceci:

this.setMap(null);

Vous pouvez ensuite afficher à nouveau la carte en utilisant setMap pour affecter votre objet de carte au lieu de null.

3
chuck w

marker est un objet Google Maps, pas un élément DOM. Jquery fonctionne sur les éléments DOM. 

1
charlietfl

Vous pouvez afficher un marqueur en définissant la visibilité true et le masquer en définissant la visibilité false

marker.setVisible(false); // hide the marker
0
Amir Md Amiruzzaman

Je ne suis pas sûr que vous puissiez masquer simplement le marqueur, mais le crochet approprié pour l'événement click serait de faire quelque chose comme ceci lorsque vous déclarez marker

google.maps.event.addListener(marker, 'click', function() {
    // do your hide here
});

Vous devrez peut-être supprimer le marqueur de la carte plutôt que de le "cacher". 

Pourquoi essayez-vous de cacher les marqueurs? Devez-vous être capable de réafficher le marqueur? Comment comptez-vous accomplir cela?

0
Anthony Shaw