Discussion :

[Mat_Mat]

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 !

[NoSmoking]

Bonjour,

- Ma fonction setInfoWindow est elle déclarée au bon endroit et appelée correctement ?

Oui.

- 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 ?

C'est une façon de faire qui est correcte.

- J'utilise marker.addListener(... . En quoi est-ce différent de google.maps.event.addListener(marker,... que j'ai vu utilisé aussi ?

le résultat sera le même mais le namespace google.maps.event possède des méthodes supplémentaires google.maps.event namespace qui peuvent être utile, donc si tu risques d'en avoir besoin autant utiliser google.maps.event.addListener.

- J'ai vu des exemples utilisant google.maps.event.addDomListener(window, 'load', initialize);. Ici j'utilise window.addEventListener('load', initialize);...

même réponse que ci dessus.

... 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 ?

le plus simple est que tu regardes dans la console (F12) onglet réseau comment se charge l'API google.

[Mat_Mat]

Merci NoSmoking pour ces explications.

J'avoue que j'avais quelques doutes, notamment avec les closures que je n'ai pas vraiment compris (il ne doit pas y avoir ca dans les langages que j'utilise).
Je vais creuser l'histoire du google.maps.event namespace et faire quelque tests. Si ca se trouve, google a bien fait les choses et google.maps.event.addDomListener(window, 'load', initialize) est supporté par plus de browsers que window.addEventListener('load', initialize);... à voir.

Merci pour l'aide en tous cas.

Mat

[NoSmoking]

google.maps.event.addDomListener(window, 'load', initialize) est supporté par plus de browsers que window.addEventListener('load', initialize);

voilà comment est implémenté la fonction dans l'API

Code :

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

1
2
3
4
5
6
7
8
    event.addDomListener = function(a, b, c, d) {
        if (a.addEventListener) {
            var e = d ? 4 : 1;
            a.addEventListener(b, c, d);
            c = new nb(a, b, c, e)
        } else a.attachEvent ? (c = new nb(a, b, c, 2), a.attachEvent("on" + b, ob(c))) : (a["on" + b] = c, c = new nb(a, b, c, 3));
        return c
    };

elle est donc bien crossbrowser et fait donc le boulot à ta place.

Pendant que l'on y est, pour marker.addListener

Code :

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

1
2
marker.addListener = function (a,b){
return _.I.addListener(this,a,b)}