[AJAX] Intégrer une carte google map avec ajax

**Piapia78** · 10/06/2011, 09h18

Bonjour,

Je voulais afficher une carte google map dans une page générée grâce à ajax.

Je m'explique: j'ai une carte qui s'affiche correctement lorsqu'on appel directement la page. Ensuite, lorsque je clique sur un bouton, une partie de ma page est généré grâce à ajax et le contenu désiré s'affiche correctement... cependant, lorsque je mets le code nécessaire à l'affichage d'une google map dans cette page générée, la carte ne s'affiche plus...

Je ne sais plus vers quoi m'orienter pour afficher ma carte correctement... Est ce que quelqu'un aurait une idée ?

Merci d'avance pour vos réponses...

**brachior** · 10/06/2011, 13h59

Je sais pas si ça peut venir de là,
Mais Google utilise des IFrame (oh le pas beau ^^)

Je sais pas si il peut y avoir des conflit
( si par exemple une iframe est chargé au démarrage
et qu'avec AJAX ça plaise pas )

Essaye de passer le code de Google en W3C pour voir Oo
C'est pas bien compliqué ^^

Le code Google de base :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<iframe
	width="400"
	height="300"
	frameborder="0"
	scrolling="no"
	marginheight="0"
	marginwidth="0"
	src="http://maps.google.fr/maps..."
></iframe>

Le code validé par le W3C et qui fonctionne partout

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
 
<object
	style="width : 400px; height : 300px; border : 0px; overflow : hidden"
	data="http://maps.google.fr/maps..."
>
	<!--[if IE]>
		<iframe
			width="400"
			height="300"
			frameborder="0"
			scrolling="no"
			marginheight="0"
			marginwidth="0"
			src="http://maps.google.fr/maps..."
		></iframe>
	<![endif]-->
</object>

**NoSmoking** · 10/06/2011, 17h02

Envoyé par Piapia78

Bonjour,

Je voulais afficher une carte google map dans une page générée grâce à ajax.

Je m'explique: j'ai une carte qui s'affiche correctement lorsqu'on appel directement la page. Ensuite, lorsque je clique sur un bouton, une partie de ma page est généré grâce à ajax et le contenu désiré s'affiche correctement... cependant, lorsque je mets le code nécessaire à l'affichage d'une google map dans cette page générée, la carte ne s'affiche plus...

Je ne sais plus vers quoi m'orienter pour afficher ma carte correctement... Est ce que quelqu'un aurait une idée ?

Merci d'avance pour vos réponses...

pas tout bien saisi le problème
- comment sont générées tes cartes ?
- si la copie du code ne te donnes pas le même rendu, c'est qu'il manque quelque chose => des erreurs dans les scripts...

Envoyé par brachior

Mais Google utilise des IFrame (oh le pas beau ^^)

sur leur site GoogleMap,peut être, mais pas lors de l'intégration d'un carte dans une page standard en utilisant l'API GoogleMap.

**gwinyam** · 23/06/2011, 17h23

ça en est où?

Si tu bosses avec jQuery, tu peux te servir de ce plugin pour te simplifier la vie :
http://gmap.nurtext.de/

**Piapia78** · 27/06/2011, 11h53

Je n'ai pas utilisé le plugin de jQuery mais l'intégration de base :

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
<script type="text/javascript">
	function load() {
 
	if (GBrowserIsCompatible())	{
		var mapFrance = new GMap2(document.getElementById("mapFrance"));
		mapFrance.setCenter(new GLatLng(47, 3), 5);
		// Paris
		var pointf1 = new GLatLng(48.85929404029, 2.341461181640);
		var MonIconf1 = new GIcon(G_DEFAULT_ICON);          
		MonIconf1.iconSize=new GSize(32,33);
		MonIconf1.image="./css/mapPin2009.png";
		var markerf1 = new GMarker(pointf1,MonIconf1);
		mapFrance.addOverlay(markerf1);
	}
}	
</script>

Code :

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

1
2
3
4
 
<body onload="load()" onunload="GUnload()">
<div id="mapFrance" style="width:600px;height:400px;"></div>
</body>

J'ai l'impression que le code javascript récupéré par AJAX n'est pas interprété.

J'ai essayé d'utiliser la fonction eval() également mais je n'ai eu aucun résultat.
Je n'ai aucune erreur sur les différents débuggers.

**gwinyam** · 27/06/2011, 15h10

Tu fais ce qui est communément appelé DSL => Dynamic Script Loading.

Pour trouver l'origine de la panne, pose toi toutes ces questions :
- Est-ce que la requête Ajax est correctement envoyée au serveur ?
- Est-ce qu'elle reçoit bien la bonne réponse, c'est à dire ton fichier ?
- Est-ce que tu l'exécutes avec jQuery, si oui, as tu préciser que le dataType est du texte plus évaluation du résultat lors de l'évènement success de la requête. Idem sur les autres frameworks que tu aurais pu utiliser.
- Si tu n'as pas utilisé de frameworks regarde du côté des frameworks (donc question précédente).
- le code JS que tu donnes en dessous (celui entre balises script) est-il tel quel dans le fichier JS importé? Si oui, alors vire les balises HTML.
- si ce n'est pas le cas, surveille la console firebug ou le webkit inspector pour voir si une erreur ne s'est pas produite dans ta page concernant ce fichier ou son appel. Si c'est le cas, la très grande majorité des navigateurs (si ce n'est tous) vont considérer que c'est une fatal error. Et une erreur fatale implique logiquement qu'il arrête tout côté JS.

Si ça correspond à rien de toutes ces pistes, faudra que tu m'envoies tes fichiers ou que tu donnes plus d'éléments.

**NoSmoking** · 27/06/2011, 20h41

Envoyé par NoSmoking

- comment sont générées tes cartes ?

j'ai toujours un peu de mal à comprendre la méthode de rajoutes des cartes, même via ajax.

Disons que si tu réinjectes du html et/ou du javascript, ce dernierl ne sera pas interprété.

**gwinyam** · 27/06/2011, 22h25

Si, sur le principe même DSL.

NoSmoking, essaie avec ça :
Un fichier html tout bête qui va "écrire" (fonction write) une balise script dans le head et c'est tout.
Plus un fichier JS tout bête qui fait une alert tout ce qu'il y a de plus banal. Bien entendu la balise ajoutée doit concerner le fichier js.
Et là "plop", tu as ton alert. C'est le Dynamic Script Loading.

**Piapia78** · 29/06/2011, 10h45

Bon alors, j'ai regardé ce qu'était le DSL. J'ai fait quelques essais. C'est vrai que c'est très pratique. En prenant un exemple simple du genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<html>
    <head>
        <script type="text/javascript">
		document.write('<script src="', 'http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXX', '" type="text/javascript"><\/script>');
            document.write('<script src="', 'maps.js', '" type="text/javascript"><\/script>');
        </script>
    </head>
<body onload="load()" onunload="GUnload()">	
<div>ici la carte :</div>
<div id="mapFrance" style="width:600px;height:400px;"></div>
</body>
</html>

avec un fichier maps.js (script sur le post précédent) cela m'affiche la carte.

Par contre, si j'utilise la fonction ajax suivante, je me retrouve avec une page blanche (pas d'erreur sous FF/Chrome) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$.ajax({
	   type: "POST",
	   url: "fm_descript.php", //page contenant ma carte
	   dataType : "html",
	   data: "vi_id="+id,
		error:function(msg){
		 alert( "Error !: " + msg );
	   },
	   success:function(data){ 
		$('#div_description').html(data);
	}});
}

J'ai l'impression que document.write() se comporte différement si l'on est dans la page ouverte (chargement de la page) ou fermée (après un onload). J'ai testé avec document.open(); / document.close(); -> sans succès !

Pour répondre aux questions :

- Est-ce que la requête Ajax est correctement envoyée au serveur ?
- Est-ce qu'elle reçoit bien la bonne réponse, c'est à dire ton fichier ?

-> Les informations sont bien envoyées au serveur et j'ai accès à mon fichier et aux autres données.

- Est-ce que tu l'exécutes avec jQuery, si oui, as tu préciser que le dataType est du texte plus évaluation du résultat lors de l'évènement success de la requête. Idem sur les autres frameworks que tu aurais pu utiliser.
- Si tu n'as pas utilisé de frameworks regarde du côté des frameworks (donc question précédente).

-> J'éxécute avec jQuery comme tu as pu le voir au dessus. J'ai testé dataType : "html" mais vu que j'utilise :

Code :

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

1
2
3
4
 
success:function(data){ 
	$('#div_description').html(data);
}

est ce vraiment utile ?

- le code JS que tu donnes en dessous (celui entre balises script) est-il tel quel dans le fichier JS importé? Si oui, alors vire les balises HTML.
- si ce n'est pas le cas, surveille la console firebug ou le webkit inspector pour voir si une erreur ne s'est pas produite dans ta page concernant ce fichier ou son appel. Si c'est le cas, la très grande majorité des navigateurs (si ce n'est tous) vont considérer que c'est une fatal error. Et une erreur fatale implique logiquement qu'il arrête tout côté JS.

-> fichier importé ! Pas de balises HTML !

Le fichier que j'appel ( url: "fm_descript.php") est donc sous cette forme là :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
   document.open();
   document.write('<script src="', 'http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXX', '" type="text/javascript"><\/script>');
  document.write('<script src="', './js/maps.js', '" type="text/javascript"><\/script>');
  document.close();
</script>
 
<?php
echo '<body onload="load()" onunload="GUnload()">';
echo '<div id="mapFrance" style="width:600px;height:400px;"></div>';
echo '</body>';
?>

Il y a certainement une erreur de paramètres dans la fonction ajax mais laquelle ?

**gwinyam** · 29/06/2011, 14h11

Je crois que j'ai trouvé. Je peux pas tester là mais le truc bête :

Ici :

Envoyé par Piapia78

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$.ajax({
	   type: "POST",
	   url: "fm_descript.php", //page contenant ma carte
	   dataType : "html",
	   data: "vi_id="+id,
		error:function(msg){
		 alert( "Error !: " + msg );
	   },
	   success:function(data){ 
		$('#div_description').html(data);
	}});
}

Tu utilises la fonction jquery.html(value) qui est une surcharge de la propriété javascript innerHtml.

Alors que dans ton test, tu utilises .write(value). Ce qui est sensiblement différent. D'un côté tu changes une valeur et c'est tout. De l'autre, tu changes ton DOM. D'où le fait qu'il y en a un qui marche et l'autre non.

Remplace ta ligne avec .html(value) par une ligne équivalente utilisant .write() et tu devrais voir une différence.

Pour rappel, changer une propriété d'une balise du DOM (comme innerHTML) peut changer son apparence mais ne provoque pas d'évaluation. Contrairement à l'utilisation de .write() qui elle provoque aussi son évaluation puisqu'on modifie le DOM.

**gwinyam** · 29/06/2011, 15h19

Il y a un problème à ça, c'est que tu voudras alors effectuer un .write() sur un élément sélectionné avec jQuery. Ce qui n'est pas directement possible.

L'astuce devient alors de faire ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
	   type: "POST",
	   url: "fm_descript.php", //page contenant ma carte
	   dataType : "html",
	   data: "vi_id="+id,
		error:function(msg){
		 alert( "Error !: " + msg );
	   },
	   success:function(data){ 
		$("#div_description").html(data);
		eval($("#div_description > script").html());
	}});
}

C'est du bricolage mais c'est censé fonctionner.

**Piapia78** · 29/06/2011, 15h48

Ce n'est pas toi qui, récemment, a écrit un article sur ton blog disant que eval() était une méthode barbare ?

Avant ta réponse, j'avais déjà testé de faire un eval() mais sans succès.

J'ai le message d'erreur suivant :

Code :

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

1
2
$ is not defined
[Stopper sur une erreur] eval($("#div_description > script").html());

**gwinyam** · 29/06/2011, 16h06

Si mais vu que tu y vas comme une barbare, je te sors une solution barbare.

Plus sérieusement, je te suggère de ne pas faire ça comme ça mais plutôt d'utiliser le plugin gmap3 et si t'as besoin que les données affichées sur ta map soit dynamique, de réserver leur affichage/raffraichissement avec ajax. La map reste ainsi gérée par le plugin et ainsi, pas de prise de tête

[AJAX] Intégrer une carte google map avec ajax

AJAX

Discussions similaires

Partager

Partager