Bonjour,

Je débute en Javascript en général, et avec l'api google en particulier. Pardonnez moi d'avance si mes questions vous paraissent évidentes.
Après avoir lu divers FAQ et tuto sur developpez ou ailleurs, j'ai créé ma première google map.
Ca a l'air de fonctionner, mais je me demande quand même si j'ai tout fait comme il fallait. Quelqu'un peut-il jeter un oeil à mon code, svp ?

En particulier :
- Ma fonction setInfoWindow est elle déclarée au bon endroit et appelée correctement ? J'avoue ne pas avoir bien compris les problèmes de closure.
- Ma fonction centerTheMap est là pour pouvoir être appelée depuis un autre code javascript si par exemple je redimensionne la div qui contient la carte. Est-ce bien comme ça qu'il faut la déclarer ?
- J'utilise marker.addListener(... . En quoi est-ce différent de google.maps.event.addListener(marker,... que j'ai vu utilisé aussi ?
- J'ai vu des exemples utilisant google.maps.event.addDomListener(window, 'load', initialize);. Ici j'utilise window.addEventListener('load', initialize); afin de ne pas dépendre de l'api google qui pourrait ne pas encore être chargée (ce que je teste au début de ma fonction initialize). Est-ce correct ?

Mon code HTML est essentiellement
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<div id="themymap" style="width:500px; height:500px;"><p>Loading map...<noscript>js is disabled</noscript></p></div>
Et mon fichier javascript est le suivant :
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
 
var themap;
 
function initialize() {
	// Remove the "Loading.." html if google map script is available, otherwise return
	if ( (typeof google !== 'undefined') && (typeof google.maps !== 'undefined') ) {
		document.getElementById("themymap").innerHTML = '';
	} else {
		return;
	}
 
	// Create the map
	var loc = [
		['Saint-Denis', 48.942794, 2.352361,'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'], 
		['Rueil-Malmaison', 48.880969, 2.191686,'http://maps.google.com/mapfiles/ms/icons/red-dot.png'], 
		['Fontenay-sous-Bois',48.851157, 2.452268,'http://maps.google.com/mapfiles/ms/icons/green-dot.png']
		];				
    var ctrlatlng = new google.maps.LatLng(48.857482, 2.349958);
    var options = {
        center: ctrlatlng,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        };
    themap = new google.maps.Map(document.getElementById("themymap"), options);
 
	// Add the markers and infowindows to the map
	var markers = new Array();
	var infowindow = new google.maps.InfoWindow();
	for (var i = 0; i < loc.length; i++) {  
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(loc[i][1], loc[i][2]),
			map: themap,
			icon: loc[i][3]
			});
		setInfoWindow(marker, themap, infowindow, loc[i][0]);
		// added the above with a single infowindow as the following was not working 
		// (infowindow content was always that of the last marker) something to do with closure
		/* var infowindow = new google.maps.InfoWindow();
		marker.addListener('click', function() {
			infowindow.setContent(loc[i][0]);
			infowindow.open(themap, this);
			}); */
		markers.push(marker);
		}
 
	// On window resize, center the map
	google.maps.event.addDomListener(window, "resize", centerTheMap);
}
 
function setInfoWindow(marker, map, infowindow, description) {
	marker.addListener('click', function() {
		infowindow.setContent(description);
		infowindow.open(map, this);
		});		
}
 
// Resize and center the map when window is resized or otherwise needed		
function centerTheMap () {
	var center = themap.getCenter();
	google.maps.event.trigger(themap, "resize");
	themap.setCenter(center); 
	}
 
// Add event listener to window load. For IE<9 use attachEvent
if(window.addEventListener){
	window.addEventListener('load', initialize);
}else{
	window.attachEvent('onload', initialize);
}
Merci d'avance pour votre aide !