Google Maps API V3 et infowindow

**Arezki Bordji** · 22/05/2010, 16h39

Bonjour,

Je sollicite un peu d'aide pour un problème dont la solution m'échappe.
C'est un problème classique mais je n'ai pas trouvé de ressources (via google et une recherche sur ces forums) pour le corriger.
En testant un peu l'API Google Maps V3, j'ai fais une boucle sur le placement de marqueur et d'infobulle mais évidemment, c'est le dernier infobulle définit qui s'ouvre (je m'y attendais). Je suis dérouté par la méthode pour ajouter un écouteur sur le clic qui m'empêche (pour le peu de connaissance que j'ai en JS) de faire référence aux éléments que je souhaite.
Ci-joint une portion du code :

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
 
for (var ii = 0; ii < json[i].cities.length; ii++)
{
	var contentString = json[i].cities[ii].city;
 
	var infowindow = new google.maps.InfoWindow({
		content: contentString
	});
 
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(json[i].cities[ii].lat, json[i].cities[ii].lng),
		map: map,
		title: json[i].cities[ii].city
	});
 
	google.maps.event.addListener(marker, 'click', function() {
 
		infowindow.open(map, marker);
	});
}

Si une bonne âme veut bien m'indiquer la marche à suivre pour résoudre ce type de problème, je lui en serai fort gré.

En vous remerciant pour votre attention.

ps: veuillez m'excuser si ce message est mal situé.

**Mickland88** · 23/06/2010, 11h30

Salut, c'est peut être un peu tard pour réponde mais on ne sait jamais ...

A la place de :

infowindow.open(map, marker);

essaye "infowindow.open(map, this);"

je pense que ça réglera ton problème

**virgilio** · 22/07/2010, 17h42

Bonjour,

Comme il n'y a pas eu de réponse apportée au dernier post et que je viens de le tester, je tiens à dire que ça marche nickel !

C'était bête mais on visiblement nombreux à s'être cassé les dents dessus.

Merci Mickland88

**bizhon** · 11/08/2010, 17h10

Bonjour,

J'ai exactement le meme probleme et c'est toujours pareil meme avec this

Ci dessous mon bout de code :

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
 
 <?php
        //Connection a la base de donnée
	connexionBDD();
        $sql = "SELECT * FROM geolocalisation";
        $req = mysql_query($sql) or die ("Erreur SQL!!");
 
 
 
		while($data = mysql_fetch_assoc($req))
                {
                        // ici la clé primaire s'appelle "geo_id"
			echo 'var marker = new google.maps.Marker({
				position: new google.maps.LatLng('.$data['geo_lat'].','.$data['geo_long'].'), 
				map: myMap,
                                title: \''.$data['geo_titre'].'\'
			});
                        var contentString = \''.$data['geo_adresse'].'\'
			var infowindow = new google.maps.InfoWindow({content : contentString });
 
			google.maps.event.addListener(marker, \'click\', function() {
				infowindow.open(myMap,this);
 
 
 
 
			});';	
		}
        ?>

Au final , j'ai bien les marqueurs qui s'affichent mais dans les infobulles j'ai toujours la derniere adresse ajouté sur la BDD.

**lucioly** · 12/08/2010, 09h55

@bizhon

bonjour, le problème dans ton code c'est que à chaque passage dans la boucle tu régénères et écrases la variable" infowindow". Tu dois avoir un objet infowindow pour chaque marker.

Personnellement j'utilise un tableau d'infowindow

**bizhon** · 12/08/2010, 16h20

OK daccord , j'ai compris le probleme par contre j'ai un peu de mal à le résoudre :/ ! Pourrais tu me donner un indice ou meme la marche a suivre

! Jsuis pas un expert en php :/ !

je suppose qu'il faut au depart :

Code :

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

var infowindow = new Array();

Mais bon la jsuis un peu perdu ! Merci d'avance

**bizhon** · 13/08/2010, 14h55

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
 
 var myMap = new google.maps.Map(document.getElementById("map"),optionsMap);
        var myTab = new Array();
        var infowindow;
 
        <?php
        //Connection a la base de donnée
	connexionBDD();
        $sql = "SELECT * FROM geolocalisation";
        $req = mysql_query($sql) or die ("Erreur SQL!!");
 
 
 
		$i=0;
                while ($data = mysql_fetch_array($req))
                {
                    // ici la clé primaire s'appelle "geo_id"
			echo ' var marker = new google.maps.Marker({
				position: new google.maps.LatLng('.$data['geo_lat'].','.$data['geo_long'].'), 
				map: myMap,
                                title: \''.$data['geo_titre'].'\'
			});
                        marker.setIcon(\'img/png/icons/pick.png\')
                        var contentString = (\'<div class="adresse_bulle">Adresse : '.$data['geo_adresse'].'</div><br/><br/><div class="desc_bulle">'.$data['geo_description'].'</div>\');
 
			infowindow = new google.maps.InfoWindow({content : contentString });
                        myTab.push(infowindow);	
			google.maps.event.addListener(marker, \'click\', function() {
				myTab[$i].open(myMap,this);
 
 
 
 
			});';	
                $i++;
 
                }
 
 
        ?>

Je pense que je suis pret du but ! Jvois pas pourquoi cela ne m'affiche aucune infobulle !

**smain46** · 24/08/2010, 17h30

Décidément on est plusieurs à se poser les mêmes questions en ce mois d'aout.

@Bizon, tu as trouvé ta réponse ? peux tu nous le dire stp ?

J'ai le même problème, mais je fais tout en javaScript pour l'instant( pas de php) , je me gratte la tête depuis 2h et j'ai bientôt plus de cheveux :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Localisation des anciens de France</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize(){
	var dataECOLE = new Array();
	dataECOLE[0] = new Array('Toulouse', 'François Test', 43.549251,1.505113, 'Eurogiciel', 'http://www.wmaker.net/firstservices/photo/290113-361383.jpg' , '<p>blabla</p>');
	dataECOLE[1] = new Array('Toulouse', 'Jean Pierre Unitaire', 43.640709,1.371717, 'Sogeti Region', 'http://www.stepstone.be/upload_BE/logo/S/logoSogeti_Belgium_467BFR.gif', ' ');
 
    var centreCarte = new google.maps.LatLng(46.396958,2.655029);
    var optionsCarte = {
        zoom: 7,
        center: centreCarte,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var maCarte = new google.maps.Map(document.getElementById("laCarteECOLE"), optionsCarte);
	var marqueurTab = new Array();
	var infoBulleTab = new Array();
 
 
	for (var i = 0; i < dataECOLE.length; i++) {
 
		var point = new google.maps.LatLng(dataECOLE[i][2], dataECOLE[i][3]);
		var optionsMarqueur = {
			position: point,
			map: maCarte,
			title: dataECOLE[i][1]
		}
		marqueurTab[i] = new google.maps.Marker(optionsMarqueur);
 
		infoBulleTab[i] = new google.maps.InfoWindow({
			content: '<div id="conteneurInfoBulle">' +
					   '<h1>' + dataECOLE[i][1] + '</h1>' +
					   '<h2>Entreprise : ' +dataECOLE[i][4]  + '</h2>' +
					   '<div id="texteInfoBulle">' +
							'<div id="lettrineImage"><img src="'+dataECOLE[i][5] +'" title="Logo Entreprise" /></div>' +
								dataECOLE[i][6] +
						'</div>' +
					'</div> '
		})
 
		 var mark = marqueurTab[i] ;
		 var infoBu = infoBulleTab[i];
 
		google.maps.event.addListener( mark , 'click', function() {
			infoBu.open(maCarte,  this );
		});	
 
	}
 
 
 
}
</script>
<style type="text/css">
#conteneurInfoBulle{
     margin:0;
     padding:0;
     width: 370px;
}
#conteneurInfoBulle h1{
     font:20px italic "Times New Roman", Times, serif;
     color:#267AA8;
     text-align:center;
}
#conteneurInfoBulle h2{
     font:17px "Times New Roman", Times, serif;
     margin:.5em 0;
     padding:0;
     text-align:center;
     color:orange;
}
#texteInfoBulle{
     margin:0;
     padding:0;
     font:11px "Trebuchet MS",sans-serif;
}
#texteInfoBulle p{
     margin:.5em 0;
     padding:0;
     text-indent:2em;
     text-align:justify;
}
#lettrineImage{
     float: left;
     margin: 0 .5em .5em 0;
     width: 220px;
     height: 163px;
}
#laCarteECOLE{
     height:100%
}
-->
</style>
</head>
<body onload="initialize()">
<div id="laCarteECOLE" ></div>
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>

J'ai bien mes 2 marqueurs, mes 2 events, mais j'ai le même contenu d'infoWindow

Merci de votre aide

Edit : Je précise que j'ai lu ça : http://www.developpez.net/forums/d92...me-infowindow/ mais j'ai pas compris ce qu'il faut que je fasse (je suis nouveau en Javascript dsl).

**rikidude** · 09/09/2010, 20h55

Met quelques variable publique, et sort ton addListener de ta fonction d'initialisation:

Voici ton nouveau code:

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
<script type="text/javascript">
        var infoBulle = new google.maps.InfoWindow();
        var maCarte;
 
        function initialize() {
            var dataECOLE = new Array();
            dataECOLE[0] = new Array('Toulouse', 'Franois Test', 43.549251, 1.505113, 'Eurogiciel', 'http://www.wmaker.net/firstservices/photo/290113-361383.jpg', '<p>blabla</p>');
            dataECOLE[1] = new Array('Toulouse', 'Jean Pierre Unitaire', 43.640709, 1.371717, 'Sogeti Region', 'http://www.stepstone.be/upload_BE/logo/S/logoSogeti_Belgium_467BFR.gif', ' ');
 
            var optionsCarte = {
                zoom: 7,
                center: new google.maps.LatLng(46.396958, 2.655029),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
 
            maCarte = new google.maps.Map(document.getElementById("laCarteECOLE"), optionsCarte);
 
            var contenue;
            var point;
            var optionsMarqueur;
            var marqueur;
 
            for (var i = 0; i < dataECOLE.length; i++) {
                point = new google.maps.LatLng(dataECOLE[i][2], dataECOLE[i][3]);
                optionsMarqueur = {
                    position: point,
                    map: maCarte,
                    title: dataECOLE[i][1]
                }
                marqueur = new google.maps.Marker(optionsMarqueur);
 
                contenue = '<div id="conteneurInfoBulle">' +
                            '<h1>' + dataECOLE[i][1] + '</h1>' +
                            '<h2>Entreprise : ' + dataECOLE[i][4] + '</h2>' +
                            '<div id="texteInfoBulle">' +
                            '<div id="lettrineImage"><img src="' + dataECOLE[i][5] + '" title="Logo Entreprise" /></div>' +
                            dataECOLE[i][6] +
                            '</div>' +
                            '</div> ';
 
                bindInfoWindow(marqueur, contenue);
            }
        }
 
        function bindInfoWindow(marqueur, info) {
            google.maps.event.addListener(marqueur, 'click', function() {
                infoBulle.setContent(info);
                infoBulle.open(maCarte, marqueur);
            });
        }
    </script>

Bonne journée,

**l'coy** · 24/02/2011, 19h21

Bonjour, j'ai un soucis avec les infowindow. Elle ne s'affiche pas.

Voici mon code :

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
 
 
var pts1 = new google.maps.LatLng(48.85846111697847, 2.2944045066833496);
createMarker(pts1,message);
 
 //Fonction qui permet de créer des marqueurs
function createMarker(pts, message) {
        var infowindow = new google.maps.InfoWindow({content:message});
	var marker = new google.maps.Marker({position : pts, map: map});
	//Créer un événement au click sur le marker voulu
	google.maps.Event.addListener(marker, "click", function() {
	infowindow.open(map, this);
	});
return marker;
}

Je ne comprend pas où se trouve mon erreur pouvez vous m'aider.

**javathehut** · 11/03/2012, 14h25

merci a rikidude pour sa solution

**Souri84** · 05/11/2013, 10h51

Désolé de déterrer un sujet aussi vieux que celui là, mais je tenais à remercier rikidude pour sa réponse.............. J'ai passé toute la journée hier à essayer de trouver une solution....