Discussion :

[meneldil]

Bonjour à tous,

J'ai également le même soucis (décidément), que sur cette discussion http://www.developpez.net/forums/d92...v3-infowindow/...

Je sais qu'il faut sortir la variable infowindow de la boucle pour ne pas qu'elle soit écrasée.
Mais la question c'est comment attribué la construction de la bulle à chaque marker ?

Voici le code :

Javascript :

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
 
<script type="text/javascript">
function initialize() {
	geocoder = new google.maps.Geocoder();
	var mapOptions = {
		zoom: 5,
		minZoom : 5,
		maxZoom : 10,
		center: new google.maps.LatLng(46.2276380, 2.2137490),
		disableDefaultUI: true,
		overviewMapControl : false,
		zoomControl : true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
	setMarkers(map, centres_plages);
}
 
function codeAddress() {
	var address = document.getElementById('adresse_google_map').value;
	geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);
		} else {
			alert('Geocode was not successful for the following reason: ' + status);
		}
	});
}
 
/*
[0] Nom du domaine
[1] Latitude
[2] Longitude
[3] Rue
[4] Code poste, Ville
[5] Téléphone
[6] Fax
[7] Email
[8] URL
*/
var centres_plages = [
  ['Domaine 1', 48.85887766623372, 2.3470598999999766, "Rue1", "75 Paris", "Tél. : 0102030405", "Fax. : 0102030405", "contact@toto.com", "https://www.google.fr/"],
  ['Domaine 2', 44.863752324699426, -0.5861409999999978, "Rue2", "33200 Bordeaux", "Tél. : 0102030405", "Fax. : 0102030405", "contact@toto.com", "https://www.google.fr/"],
  ['Domaine 3', 45.75797832429399, 4.835120949999919, "Rue3", "69060 Lyon", "Tél. : 0102030405", "Fax. : 0102030405", "contact@toto.com", "https://www.google.fr/"]
];
 
 
 
function setMarkers(map, locations) {
	for (var i = 0; i < locations.length; i++) {
		var centre_plage = locations[i];
 
		var myLatLng = new google.maps.LatLng(centre_plage[1], centre_plage[2]);
 
		var marker = new google.maps.Marker({
			position: myLatLng,
			map : map,
			title : centre_plage[0],
			zIndex : i + 1
		});
 
		var contentString = '<div id="contentMap">'+
			'<h1 class="titleMap">'+centre_plage[0]+'</h1>'+
			'<div id="bodyContent">'+
				'<p>'+centre_plage[3]+'<br>' +
				''+centre_plage[4]+'<br>'+
				''+centre_plage[5]+'<br>'+
				''+centre_plage[6]+'<br>'+
				''+centre_plage[7]+'</br>'+
				'<a href="'+centre_plage[8]+'" target="_blank">En savoir plus</a></p>'+
			'</div>'+
		'</div>';
 
		var infowindow = new google.maps.InfoWindow({
			content : contentString,
			maxWidth : 600
		});
 
		google.maps.event.addListener(marker, 'click', function() {
			infowindow.open(map,this);
		});
	}
}
 
 
google.maps.event.addDomListener(window, 'load', initialize);
 
</script>

HTML :

Code :

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

1
2
3
4
5
6
7
 
<form>
    <label for="adresse_google_map">Ville</label><br>
    <input id="adresse_google_map" type="textbox"><br>
    <input type="button" value="Rechercher" onclick="codeAddress()">
</form>
<div id="map-canvas" style="width:100%; height:350px;"></div>

Merci par avance !

[NoSmoking]

Bonsoir,
tu trouveras la solution dans la Comment afficher une InfoWindow au-dessus des autres ?