Discussion :

[Nico440]

Bonjour,

Je viens demandé votre aide, parce que la je tourne en rond sur un problème avec les google map.

Je dois ajouter de multiple marker via le geocoder, chaque marker doit avoir une infowindow.

J'ai déjà pu réglé pas mal de problème via le FAQ mais la je coince.
...Je ne suis pas un dieux du javascript, je pense que ça n'aide pas...

Voila 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
 
function initCarte(){
    var geocoder;
    geocoder = new google.maps.Geocoder();
      var locations = [
                      ['1110 Morges', 'morges','titre1', 1],
                      ['Fran&ccedil;ois 5<br>1003 Lausanne', 'lausanne','titre2', 2],
                      ['1007 Lausanne','vevey','titre3', 3]
 
                  ];
 
  var oMap, oMarker, oInfo;
  var i, nb = locations.length;
  // création de la carte
  oMap = new google.maps.Map(document.getElementById("map-canvas"),{
    'zoom' : 8,
    'center' : new google.maps.LatLng( 46.535248,6.632538),
    'mapTypeId' : google.maps.MapTypeId.ROADMAP
  });
  // création des markers
  for( i = 0; i < nb; i++){
    // création marker
    geocoder.geocode( { 'address': locations[i][1]}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
                    oMarker = new google.maps.Marker({
                    'numero' : i,           // ici on sauve la valeur de i
                    'position' : results[0].geometry.location,
                    'map' : oMap,
                    'title' : locations[i][2]
                });
            } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
 
        });
 
 
    // événement clic sur le marker
    oInfo = new google.maps.InfoWindow();
    google.maps.event.addListener( oMarker, 'click', function() {
      // affectation du contenu en utilisant this.numero
      oInfo.setContent(locations[this.numero][0]);
      // affichage InfoWindow
      oInfo.open( this.getMap(), this);
    });
  }
 
 
 
}

Tout fonctionnait bien jusqu'à ce que j'ajoute le geocoder...
Depuis j'ai une erreur js: TypeError: A is undefined.
J'ai fais des recherches, il en retourne souvent un problème d'ID de la div qui contient la carte n'est pas le même que celui spécifié dans le JS, mais ici ce n'est pas le cas...

Est-ce que quelqu'un aurait une idée d'où cela peut venir ?

Merci pour votre future aide!

[NoSmoking]

Bonjour,
plusieurs erreurs et quelques maladresses

Code :

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

google.maps.event.addListener( oMarker, 'click', function()

tu affectes une fonction à un élément qui n'est pas encore créer, il le sera au retour de la requête, il te faut remonter la création et la gestion dans la fonction callback.

Au retour de la fonction callback que vaudra i donc locations[i] ????

Pour résoudre ton soucis, il te faut "encapsuler" la fonction de geodecodage et lui passer le paramètre que tu veux utiliser à l'intérieur

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
(function( param){ // par la suite on utilisera param
  geocoder.geocode( { 'address': param[1]}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        oMarker = new google.maps.Marker({
            'info' : param[0],
            'position' : results[0].geometry.location,
            'map' : oMap,
            'title' : param[2]
          });
        // événement clic sur le marker
        oInfo = new google.maps.InfoWindow();
        google.maps.event.addListener( oMarker, 'click', function() {
            // affectation du contenu en utilisant this.numero
            oInfo.setContent(this.info);
            // affichage InfoWindow
            oInfo.open( this.getMap(), this);
          });
      }
      else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
})(locations[i]); // passage en paramètre

cette fonction est à mettre dans la boucle.

[Nico440]

Qu'une seul chose à dire: Merci pour la rapidité de la réponse et pour le mini-cours de JS!

J'ai appliqué les correctifs que tu as mis et tout fonctionne parfaitement!

Merci

[NoSmoking]

Il peut être intéressant de conserver le résultat de la recherche simplement pour ne pas avoir à faire une nouvelle requête à chaque ouverture de page, j'entends par là ajouter les lat/lng dans ton objet locations dès que tu les connais.