Infobulle des marqueur - Api v3

**rider74** · 20/12/2009, 15h40

Bonjour,

Je développe avec l'api v3 de Google Map.

J'ai réalisé une application me permettant d'afficher sur une carte les marqueurs correspondant à des adresses situées dans un fichier xml.

J'ai ajouté à ces marqueurs une infobulle afin d'indiquer le nom et l'adresse correspondante.

Or avec l'api V3, les infobulles restent ouvertes même quand on clique sur un autre marqueur.

Je cherche une solution pour retrouver le fonctionnement de la v2 qui fermait l'infobulle lorsqu'on cliquait sur un autre marqueur.

Voici la partie de code Javascript correspondante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/*
Fonction appellée au chargement de la page index.php
Parametres: les coordonnées du point de centrage de la carte et le niveau de zoom
*/
function load(lat,lng,zoom) 
{
	//Définition du point central de la carte
    var coord_centre = new google.maps.LatLng(lat, lng);
	//Définitions des options de la carte
    var option = {
      zoom: zoom,
      center: coord_centre,
	  scaleControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
	//Création de la carte dans le div correspondant et avec les options précédentes
    map = new google.maps.Map(document.getElementById("div_map"), option);
	//Instanciation d'un objet Geocoder pour conversion des adresses postales en coordonnées GPS
	geocoder = new google.maps.Geocoder();
	//Lecture du fichier xml et création des marqueurs    
	downloadUrl("markers.xml", function(data) {
		var markers = data.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++) 
		{
			CreerMarker(markers[i].getAttribute("nom"),markers[i].getAttribute("adresse"));
		}
	});
}
 
/*
Fonction de création des marqueurs
Parametres: l'adresse postale et le nom à afficher
*/
function CreerMarker(nom, adresse)
{
	geocoder.geocode( { 'address': adresse}, function(results, status) 
	{
		if (status == google.maps.GeocoderStatus.OK) 
		{			
			//Si adresse trouvée, création du marqueur
			var marker = new google.maps.Marker({
				map: map, 
				position: results[0].geometry.location,
				title: nom
			});
			//Ajout de la fenetre d'informations au marqueur
			var contenu = nom+"<br />"+adresse;
   			var infowindow = new google.maps.InfoWindow({
        		content: contenu
    		});
			//Création du listener du clic de souris sur le marqueur
			google.maps.event.addListener(marker, 'click', function() {
				infowindow.open(map,marker);
    		});
		}
		else
		{
			alert("Géolocalisation échouée a cause de: " + status);
		}
	});	
}

Je vous ai joint également un screenshot du résultat pour illustrer le problème.

J'ai trouvé ceci sur un site, mais je ne suis pas arrivé à le mettre en pratique:

Ok, one more question and I’m covered (I hope). I made all the different infowindows appear, how can I close the others when I click and open a new one?
Tried closeInfoWindow(); in the listener function but it disables all of them…

The easiest way to do this is to just have one instance of the InfoWindow object that you reuse over and over again. That way when you click a new marker the infoWindow is “moved” from where it’s currently at, to point at the new marker.
Use its setContent method to load it with the correct content.

Si vous avez une solution, je suis preneur.

**emmanuel.remy** · 11/01/2010, 15h49

Salut,

Ta variable var infowindow = new google.maps.InfoWindow(); doit être mise globale (unicité) et PARTAGEE: actuellement tu en crées autant qu'il y a de bulles.

Cela doit donner quelque chose comme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//variable globale
var infowindow = null;

/*
Fonction de création des marqueurs
Parametres: l'adresse postale et le nom à afficher
*/
function CreerMarker(nom, adresse)
{
	geocoder.geocode( { 'address': adresse}, function(results, status) 
	{
		if (status == google.maps.GeocoderStatus.OK) 
		{			
			//Si adresse trouvée, création du marqueur
			var marker = new google.maps.Marker({
				map: map, 
				position: results[0].geometry.location,
				title: nom
			});
			//Ajout de la fenetre d'informations au marqueur
			var contenu = nom+"<br />"+adresse;
			
      //Création du listener du clic de souris sur le marqueur
			google.maps.event.addListener(marker, 'click', function() {
          if (!infowindow) {
            infowindow = new google.maps.InfoWindow();
            infowindow.setContent(contenu);
            infowindow.open(map,marker);
          } else {
            infowindow.setContent(contenu);
            infowindow.setPosition(marker.getPosition());
          }
    		});
		}
		else
		{
			alert("Géolocalisation échouée a cause de: " + status);
		}
	});	
}

ERE

**rider74** · 11/01/2010, 21h49

Merci pour ton aide.

Ton code fournit le résultat attendu car le contenu de l'infobulle est bien remplacé par celui du marqueur cliqué mais l'infobulle reste sur le premier marqueur cliqué.

Cela vient du fait que cette ligne n'a aucun effet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

infowindow.setPosition(marker.getPosition());

L'infobulle étant ouverte avec une ancre, elle y reste attachée:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

infowindow.open(map,marker);

Extrait de la doc de l'api:

InfoWindowOptions object specification:
position:The LatLng at which to display this InfoWindow. If the InfoWindow is opened with an anchor, the anchor's position will be used instead.

J'ai donc modifié ton code en remplaçant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

infowindow.setPosition(marker.getPosition());

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

infowindow.open(map,marker);

Cela a pour effet d'ouvrir une nouvelle infobulle sur le marqueur cliqué.

Merci beaucoup

**emmanuel.remy** · 11/01/2010, 22h20

Oups, je n'avais pas été assez vigilant

, même si je m'étais posé la question. Comme quoi quand on ne teste pas... Dans ce cas pour être super propre tu devrais ajouter un infowindow.close(); avant de refaire ton open.

Bon dev,

ERE

**rider74** · 11/01/2010, 22h23

Exact c'est plus propre, merci encore

**aquel33** · 23/12/2010, 20h05

bonjour
je cherche à faire la même chose, carte avec des marqueurs issus d'un XML + cases à cocher
pourrais-tu me passer ton code ?
merci

**[ZiP]** · 29/12/2010, 02h51

Bonjour,

J'avais le même problème et il est corrigé via vos conseils !

Merci,
ZiP

**rider74** · 30/12/2010, 08h55

@ aquel33:

Tu as tout ce qu'il faut dans mon premier post. Il te suffit d'y intégrer les réponses fournies par emmanuel.remy.

Il faut ensuite créer une page html qui appelle la fonction javascript load().

Cette fonction prend 3 paramètres qui sont la latitude, la longitude et le niveau de zoom pour initialiser la carte.

Il te faut ensuite un fichier markers.xml qui a cette forme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?xml version="1.0" encoding="utf-8" ?>
<markers>
<marker nom="Toto" adresse=" adresse de toto" />
<marker nom="Tutu" adresse=" adresse de tutu" />
</markers>

Infobulle des marqueur - Api v3 [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager