Javascript Girl
  1. Javascript Girl
  3. Google Maps API v3: Fermez infowindow lorsque l'élément DOM est cliqué
Intereting Posts
Chaîne de promesses avec bluebird Besoin d'une expression régulière pour capturer le domaine de second niveau (SLD) Pourquoi le nouveau numéro (2)! = Nouvelle chaîne ("2") en JavaScript Est-ce que Jshint comprend Angular? "Javascript: void (0);" vs "return false" vs "preventDefault ()" Empêcher le défilement de la page lorsque vous faites défiler un DIV en résolvant l'avertissement dans la console Demande de flacon Python à partir d'url – pour décoder l'image base64 Comment rediriger vers une autre page après 5 minutes? Exemples de modèles pratiques de conception orientés objet javascript Html5-canvas move object on line Qu'arrive-t-il à mon application Web si JavaScript est désactivé? Comment afficher les données JSON brutes sur une page HTML Settimeout ne fonctionne pas lorsque Windows va en mode veille, puis réveillez-vous Quelles sont les limites de la performance JavaScript? Faites une expression pour STRING.STRING.STRING sur PEG.js

Google Maps API v3: Fermez infowindow lorsque l'élément DOM est cliqué

Je joue pour la première fois avec Google Maps, alors j'ai regardé un joli tutoriel sur CSS Tricks: http://css-tricks.com/google-maps-slider/ J'aime travailler avec jQuery mieux que JS pur , Et ce tutoriel permet de cliquer sur un endroit dans une liste pour afficher le marqueur dans la carte.

Je l'aimais de cette façon, mais je dois ajouter des inférences au marqueur. Ce que j'ai fait, mais quand je clique sur un endroit sur la liste et que la carte dépasse, l'infowindow reste ouvert! Je pense que c'est parce que je dois attacher l'infowindow.close () à l'événement en cliquant sur un "#locations li".

Voici mon code, qui fonctionne sur document.ready: 

$(function() { var chicago = new google.maps.LatLng(41.924832, -87.697456), pointToMoveTo, first = true, curMarker = new google.maps.Marker({}), $el; var myOptions = { zoom: 10, center: chicago, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map($("#map_canvas")[0], myOptions); $("#locations li").click(function() { $el = $(this); if (!$el.hasClass("hover")) { $("#locations li").removeClass("hover"); $el.addClass("hover"); if (!first) { // Clear current marker curMarker.setMap(); // Set zoom back to Chicago level // map.setZoom(10); } // Move (pan) map to new location function move(){ pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long")); map.panTo(pointToMoveTo); } move(); // Add new marker curMarker = new google.maps.Marker({ position: pointToMoveTo, map: map }); // Infowindow: contenido var contentString = '<p>'+$el.find("h3").html()+'</p>'; contentString += 'hola' ; var infowindow = new google.maps.InfoWindow( { size: new google.maps.Size(150,50), content: contentString }); // On click, zoom map google.maps.event.addListener(curMarker, 'click', function() { //map.setZoom(14); infowindow.open(map,curMarker); });

Il semble que vous créez un nouveau InfoWindow pour chaque marqueur. Citation à partir des documents de l'API Google Maps :

Si vous voulez seulement qu'une fenêtre d'information s'affiche à la fois (tout comme le comportement sur Google Maps), il vous suffit de créer une fenêtre d'informations, que vous pouvez réaffecter à différents emplacements ou marqueurs lors d'événements de carte (tels que les clics de l'utilisateur).

Par conséquent, vous pouvez simplement créer un objet InfoWindow juste après avoir initialisé votre carte, puis manipuler le gestionnaire d'événements de click comme suit: 

 google.maps.event.addListener(curMarker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map, curMarker); });

Ensuite, InfoWindow doit se fermer automatiquement lorsque vous cliquez sur un nouveau marqueur sans avoir à appeler la méthode close() .