Intégrer plusieurs google map sur une page html

Version imprimable

Bonjour à tous,

Comme le titre l'indique, je voudrais intégrer plusieurs google map sur une meme page. J'ai donc créé une première carte :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function load() { if (GBrowserIsCompatible()){ var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(30, 0), 1); // Paris var point = new GLatLng(48.85929404029, 2.341461181640); var MonIcon = new GIcon(G_DEFAULT_ICON); MonIcon.iconSize=new GSize(32,33); MonIcon.image="./css/mapPin2009.png"; var marker = new GMarker(point,MonIcon); map.addOverlay(marker); } }
avec le html

Code:

<div id="map" style="width:600px;height:400px"></div>

J'ai voulu créé une seconde carte avec la meme structure dans la function load et dans le html id=map2.
Avec ce système, la première carte s'affiche toujours mais pas la 2ème.
L'erreur ne vient pas de la 2ème carte car je l'ai testé indépendamment.

Je pense que cela vient des lignes suivantes qui ne peuvent être duppliqué pour afficher plusieurs cartes :
Code:

1 2 var map = new GMap2(document.getElementById("map")); var map2 = new GMap2(document.getElementById("map2"));
Auriez-vous une méthode pour corriger cela ?

Merci d'avance pour vos réponses

12/07/2010, 17h02
gwinyam

Des messages d'erreur de la part de Firebug ou de la console Firefox?
Ou encore du Webkit Inspector avec Chrome?
12/07/2010, 17h57
Piapia78

on a une erreur "Uncaught TypeError: Cannot read property 'firstChild' of null" venant du main.js de Google Map.
12/07/2010, 19h29
gwinyam

ça ressemble à une NullPointerException en Java ou à une "Trying to get property of non-object" en PHP. Cela veut dire que l'objet que tu cherches à manipuler n'existe pas. Parce qu'il n'a soit pas été instancié, soit mal instancié et du coup pas.

Il y a des chances que le GetElementByID soit en partie la cause. Essaie d'abord d'afficher la carte sans localiser Paris dessus. Si t'as toujours l'erreur, c'est que ça vient de la carte, sinon c'est Paris qui est en cause.
13/07/2010, 11h35
Piapia78
Apparement cela vient de la seconde carte et du "GetElementByID".
Code:

1 2 var map = new GMap2(document.getElementById("map")); var map2 = new GMap2(document.getElementById("map2"));
Dans ce cas, le "map2" ne passe pas. Comment remedier à cela ?
13/07/2010, 14h12
gwinyam

Fais péter le code de la page. En épurant les trucs privés, ça sera plus simple.

Code:

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
function createMarker(point,text) {
	  var marker = new GMarker(point);
	  GEvent.addListener(marker, "click", function() {   marker.openInfoWindowHtml(text);  });
	  return marker; //fonction qui affiche l'info bulle légende sur le marqueur
	}
	function load() {
 
	if (GBrowserIsCompatible())
        {
 
			/****************Google monde************************/			
 
			var map = new GMap2(document.getElementById("map"));
			map.setCenter(new GLatLng(30, 0), 1);
			// Paris
			var point = new GLatLng(48.85929404029, 2.341461181640);
			var MonIcon = new GIcon(G_DEFAULT_ICON);          
			MonIcon.iconSize=new GSize(32,33);
			MonIcon.image="./css/mapPin2009.png";
			var marker = new GMarker(point,MonIcon);
			map.addOverlay(marker);
 
/****************Google France************************/	
			var mapFrance = new GMap2(document.getElementById("mapFrance"));
			mapFrance.setCenter(new GLatLng(47, 3), 5);
			// Paris
			var point = new GLatLng(48.85929404029, 2.341461181640);
			var MonIcon = new GIcon(G_DEFAULT_ICON);          
			MonIcon.iconSize=new GSize(32,33);
			MonIcon.image="./css/mapPin2009.png";
			var marker = new GMarker(point,MonIcon);
			mapFrance.addOverlay(marker);
mapFrance.addControl(new GSmallMapControl());
}		
	}

Salut,

Je viens de tester ce code (exactement celui-ci) et cela fonctionne parfaitement chez moi.

Code:

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
<html>
	<head>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAxw6OPYPycj4BlDKt77A3CxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRBPCgnhaCip32Q3c6B0dg7BxG3Yg" type="text/javascript"></script>
  <script>
	function load() {
 
	if (GBrowserIsCompatible())
        {
 
			/****************Google monde************************/			
 
			var map = new GMap2(document.getElementById("map"));
			map.setCenter(new GLatLng(30, 0), 1);
			// Paris
			var point = new GLatLng(48.85929404029, 2.341461181640);
			var MonIcon = new GIcon(G_DEFAULT_ICON);          
			MonIcon.iconSize=new GSize(32,33);
			MonIcon.image="./css/mapPin2009.png";
			var marker = new GMarker(point,MonIcon);
			map.addOverlay(marker);
 
/****************Google France************************/	
			var mapFrance = new GMap2(document.getElementById("mapFrance"));
			mapFrance.setCenter(new GLatLng(47, 3), 5);
			// Paris
			var point = new GLatLng(48.85929404029, 2.341461181640);
			var MonIcon = new GIcon(G_DEFAULT_ICON);          
			MonIcon.iconSize=new GSize(32,33);
			MonIcon.image="./css/mapPin2009.png";
			var marker = new GMarker(point,MonIcon);
			mapFrance.addOverlay(marker);
mapFrance.addControl(new GSmallMapControl());
}		
	}
 
  </script>
	</head>
	<body onload="load();">
		<div id="mapFrance" style="width:300px;height:240px"></div> 
		<p>autre carte</p>
		<div id="map" style="width:300px;height:240px"></div> 
	</body>
</html>

ERE