Discussion :

[Piapia78]

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 :

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

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 :

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

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

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

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

[gwinyam]

Des messages d'erreur de la part de Firebug ou de la console Firefox?
Ou encore du Webkit Inspector avec Chrome?

[Piapia78]

on a une erreur "Uncaught TypeError: Cannot read property 'firstChild' of null" venant du main.js de Google Map.

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

[Piapia78]

Apparement cela vient de la seconde carte et du "GetElementByID".

Code :

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

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 ?

[gwinyam]

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

[Piapia78]

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
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());
}		
	}

[emmanuel.remy]

Salut,

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

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