11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Fermer InfoWindow précédente - GoogleMaps

Modérateur
Bonjour,

Je génère des marqueurs aves infobulles au chargement de la page sur ma carte. Je souhaiterais que lorsqu'on ouvre une infobulle, la précédente se ferme automatiquement. Voici ce que j'ai fait mais qui ne fonctionne pas (la variable $markers est insérée en php dans le head de la page :
$markers .= 
"var Marker$i = new google.maps.Marker
		({
		position: new google.maps.LatLng($lat, $longi),
		map: map,
		title: \"$gz_name\",
		icon: $image
		})
		
		google.maps.event.addListener(Marker$i, 'click', function() {
			if (InfoWindow) InfoWindow.close();
			var WindowOptions = 
			{
			content:
    		  '<h2>$gz_name</h2>'+
    		  '<div id=\"bodyContent\">'+
    		  '<ul>'+
    		  '<li><b>Ville</b> : $gz_city</li>'+
    		  '<li><b>Catégorie</b> : $gz_category</li>'+
    		  '</ul>'+
    		  '<p style=\"text-align: right;\"><a href=\"$url.php\" title=\"Se rendre à la fiche descriptive\">Fiche complète</a></p>'+
    		  '</div>'
			};
			var InfoWindow = new google.maps.InfoWindow(WindowOptions);
			InfoWindow.open(map,Marker$i);
		});";

La ligne if (InfoWindow) InfoWindow.close(); ne fonctionne pas, les infobulles restent toutes affichées.
Un petit coup de pouce ?
Merci.
Modifié par jojaba (04 Oct 2013 - 15:50)
Modérateur
Bon ben, j'ai fait autrement.
Petite explication pour ceux qui auraient le même problème que moi.
Le code d'abord (je vous colle le code js généré dans la page pour le premier marqueur) :
var infocontent0 = {
			content:
    		  '<h2>Titre de l'infobulle</h2>'+
    		  '<div id="bodyContent">'+
    		  '<ul>'+
    		  '<li><b>Ville</b> : La ville</li>'+
    		  '<li><b>Catégorie</b> : la catégorie</li>'+
    		  '</ul>'+
    		  '<p style="text-align: right;"><a href="la-page.php" title="Se rendre à la fiche descriptive">Fiche complète</a></p>'+
    		  '</div>'
			};
		var infowindow0 = new google.maps.InfoWindow(infocontent0);
		var Marker0 = new google.maps.Marker
		({
		position: new google.maps.LatLng(-xxxxxxxxxxxx,xxxxxxxxxxxxxxxx),
		map: map,
		title: "La page",
		icon: icon_page
		})
		
		google.maps.event.addListener(Marker0, 'click', function() {
			if (typeof( window.infoopened ) != 'undefined') infoopened.close();
			infowindow0.open(map,Marker0);
			infoopened = infowindow0;
		});

Ce qui change :
google.maps.event.addListener(Marker0, 'click', function() {
  if (typeof( window.infoopened ) != 'undefined') infoopened.close();
  infowindow0.open(map,Marker0);
  infoopened = infowindow0;
});

Je définis une variable à portée globale nommée infoopened qui retient la référence à l'infbulle ouverte (ici infobulle0). Je vérifie après le clic si infoopened est bien définie (if (typeof( window.infoopened ) != 'undefined')). Le cas échéant, je ferme l'infobulle.
Ça semble fonctionner sur IE8+

Ça aidera peut-être d'autres personnes... Smiley cligne

PS : j'utilise GoogleMaps v3.
Modifié par jojaba (04 Oct 2013 - 15:49)
Sujet clos
Aller à