Discussion :

[clemissile]

Salut à tous,

Dans le cadre d'un cours, je dois créer une application qui sert à afficher des parcours de randonnée (pédestre, VTT ou à cheval) sur une carte. Nous est fourni un fichier XML, et nous devons l'utiliser pour en extraire les informations utiles à la carte. J'ai donc affiché sur cette carte des markers et infobulles. Ces dernières contiennent une rapide description et un lien "Voir les détails".

Au clic sur ce lien, les détails sont censés s'afficher dans une section à droite de la carte. J'ai donc essayé d'utiliser une fonction getInfos et d'utiliser l'id de chacun des liens pour récupérer les détails dans le fichier XML. Cependant, quand je clique sur un lien et que je recherche à afficher this.id (pour commencer) cela me note "undefined".

Et là, je ne comprends pas car j'ai bien défini un id différent a chacun de mes liens. Voici mon code JS :

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
var map;
 
var initialize = function() {
  map = new google.maps.Map(document.getElementById('mapSection'), {
  center: {lat: 45.993, lng: 2.281},
  zoom: 5,
  mapTypeId: google.maps.MapTypeId.HYBRID
  });
 
  var infoBulle = new google.maps.InfoWindow();
 
  setMarkers(map, infoBulle);
 
}
 
// Fonction qui determine la position des Markers et le contenu de l'infobulle associée         
function setMarkers(map, infoBulle) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data/randos.xml', true);
  xhr.onload = function() {
   var doc = xhr.responseXML;
   var element = doc.getElementsByTagName('rando:depart'); // On recupère toutes les coordonnées
   var title = doc.getElementsByTagName('dc:title'); // On recupère tout les titres
    for (var i = 1; i <= element.length; i++) {
      var pos = element[i-1].getElementsByTagName('gpx:trkpt');
      var lat = pos[0].getAttribute("gpx:lat"); // On récupère la latitude
      var lon = pos[0].getAttribute("gpx:lon"); // Et la longitude
 
      var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lon));
 
      var content = '<h3>'+ title[i].firstChild.data +'</h3>' +
                    '<p>' + doc.getElementsByTagName('dc:description')[i].firstChild.data + '</p>' +
                    '<a href="#" onclick="getInfos()" id="'+ i +'">Voir les détails</a>';
 
      var marker = createMarker(point, content, infoBulle);
   };
  };
 
  xhr.send(null);
};
 
// Fonction qui créé les Markers et les infoBulles associées     
function createMarker(point, content, infoBulle) {
  var marker = new google.maps.Marker({
    position: point,
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP
  });
 
  google.maps.event.addListener(marker, 'click', function() {
    infoBulle.setContent(content);
    infoBulle.open(map, marker);
  });
 
};
 
function getInfos() {
  document.getElementById('details').innerHTML += this.id;
}
 
window.onload = initialize;

J'espère avoir été clair et que quelqu'un à une solution à mon problème, ou au moins juste une piste.

Cordialement,
Clemissile

[NoSmoking]

Bonjour,
fait un console.log( this) pour te rendre compte que le this n'est pas celui que tu crois !

Passe en paramètre ton objet cliqué onclick="getInfos(this)" que tu récupères dans la fonction

[clemissile]

Salut,

Effectivement le this n'était pas celui que je pensais!
C'était finalement tout bête, merci beaucoup!

Cordialement,
Clemissile