API V3 avec jQuery

Salut tout le monde,
je suis en train de développer une application web qui géolocalise les utilisateurs.
J'utilise ainsi api javascript google maps v3 avec jquery.
voila mon code :

Code:

---

1 2 3 4 5 6 7 8 9 10

$().ready(function() { var latlng = new google.maps.LatLng(49.41483, 2.817895); var options = { center: latlng, zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; var carte = new google.maps.Map(document.getElementById("carte"), options); });

---

J'ai ensuite un fonction javascript qui serait appelée après un clic sur un bouton.

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

function afficher(id) { $.ajax({ url : "geo.php", dataType : "XML", data : "id="+id, success : function(data) { var i = 0; $(data).find('fire').each(function() { i = i+1; var fire = $(this); var longi = fire.attr("longitude"); var lati = fire.attr("latitude"); var ltlg = new google.maps.LatLng(lati, longi); var myMarker = new google.maps.Marker({ position: ltlg, map: carte, icon: fire.attr("icone"), title: fire.attr("address") }); }); if(i==0) alert("aucune geo trouvee"); //alert(i); }, error : function() { alert('error'); } }); }

---

la fonction est bien appelée et me retourne le texte XML voulu mais les marqueurs ne sont pas affichés dans la carte :
voilà le message:
Élément référencé par son ID/NAME dans le contexte global. Utilisez la propriété standard du W3C « document.getElementById() » à la place.
[Stopper sur une erreur] map: carte,

et quand je remplace carte par document.getElementById("carte") dans la fonction afficher() le texte XML est bien retourné mais les marqueurs ne sont pas affichés et cette fois ci sans message d'erreur.
qu'est ce que je dois faire pour que les marqueurs soient bien affichés???

Merci pour votre aide.

Tu es sûr que ta variable carte est disponible dans la fonction afficher() ?
A première vue, je dirais que non, ce qui explique le message d'erreur ;)

Justement c'est l'origine du problème, et pour remédier à ça j'ajoute au début de ma fonction afficher les lignes suivantes:

Code:

---

1 2 3 4 5 6 7 8

var latlng = new google.maps.LatLng(49.41483, 2.817895); var options = { center: latlng, zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; var carte = new google.maps.Map(document.getElementById("carte"), options);

---

mais le problème c'est qu'une autre carte se charge ce qui ne me plait pas je voudrais travailler sur la même carte!!!

ça y'est j'ai trouvé la source du problème, ma variable carte n'était pas déclarée globale, il fallait avoir

Code:

---

1 2 3 4 5 6 7 8 9 10

$().ready(function() { var latlng = new google.maps.LatLng(49.41483, 2.817895); var options = { center: latlng, zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; carte = new google.maps.Map(document.getElementById("carte"), options); });

---

sans précéder la variable carte par le mot clé var pour qu'il soit globale.
Merci :)

Citation:

---

sans précéder la variable carte par le mot clé var pour qu'il soit globale.

---

il est quand même important de déclarer cette variable avec le mot clé var en global, cela peut éviter des surprise.