récupérer une adresse avec reverse geocode

**erwah** · 29/04/2011, 09h50

Bonjour à tous,

Petit nouveau sur le forum, je suis étudiant en informatique et apprends le JS sur le tas avec l'API Google Maps.

Dans mon projet, je suis amené a générer une page html avec du php. Cette page html a priori correctement générée contient du code javascript que voici :

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
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 
	var map;
	var geocoder;
	var marker;
 
	function initialize() {
	  var nantes = new google.maps.LatLng(47.216842,-1.556744);
	  var myOptions = {
	    zoom:11,
	    mapTypeId: google.maps.MapTypeId.ROADMAP,
	    center: nantes
	  }
	  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);e
	}
 
 
	/*
	 * C'est ici que ça se complique
	 */
 
	function codeLatLng(lat, lng) {
	  geocoder = new google.maps.Geocoder(); //module pour récupérer un nom en fonction des coordonnées GPS
	  var latlng = new google.maps.LatLng(lat, lng);
	  geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var str = "";
          str += results[0].formatted_address;
          return str;
 
          //ici ce return ne marche pas, la fonction me renvoi en faite "undefined"
          // alors qu'un alert(str); fonctionne très bien
 
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });
        }
 
</script>
 
/*
 * Et un peu plus loin dans mon HTML, j'ai ce bout de code :
 */
 
<script type="text/javascript">
  var start = "";
  start += codeLatLng(47.206927,-1.555082);
  document.write(start); //Ici je dois normalement récupérer une adresse de depart
</script>
//mais ça me renvoi "undefined"
 
//[...]
 
<script type="text/javascript">
  var end = "";
  end += codeLatLng(46.206927,-1.450082);
  document.write(end); //Ici je dois normalement récupérer une adresse d'arrivée
</script>
//mais ça me renvoi "undefined"

Donc ma question est, comment transmettre cette adresse afin que je puisse l'imprimer à l'écran, sachant que je ne souhaite pas utiliser d'infowindow (je veux afficher le texte manuellement), et que je ne peux pas utiliser la commande :

Code :

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

document.getElementById("truc").innerHTML=result[0].formatted_address

Pour info, voici la doc correspondante, que je ne peux pas rigoureusement utiliser :
http://code.google.com/intl/fr/apis/...verseGeocoding

Avez vous des suggestion pour récupérer cette chaine de caractères ? sachant qu'elle s'affiche très bien avec un alert() ?

**NoSmoking** · 29/04/2011, 12h51

Bonjour,
problème de fonction asynchrone, voir ce post, aide sur reurn, où le problème à été rencontré et expliqué

essaies avec ce code...

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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	function codeLatLng( lat, lng, where) {
	  var geocoder = new google.maps.Geocoder();
	  var latlng = new google.maps.LatLng(lat, lng);
	  geocoder.geocode({'latLng': latlng}, function(results, status){
      // element ou l'on va ecrire
      var oElem = document.getElementById( where);
      // action suivant resultat
      if( status == google.maps.GeocoderStatus.OK) {
        var str = results[0].formatted_address;
        oElem.innerHTML = str;
      }
      else{
        oElem.innerHTML = "Geocoder failed due to: " + status;
      }
    });
  }
  // appel des fonctions
  codeLatLng( 47.206927, -1.555082, "depart");
  codeLatLng( 46.206927, -1.450082, "arrivee");
</script>
</head>
<body>
<div><b>DEPART</b><br>
  <span id="depart"></span>
</div>
<div><b>ARRIVEE</b><br>
  <span id="arrivee"></span>
</div>
</body>
</html>

**erwah** · 30/04/2011, 09h59

Toujours pas, mais tu m'a mis sur une piste, du coup je pense pouvoir trouver une solution, je poste ça si ça marche. Merci

**erwah** · 30/04/2011, 13h47

Bon en faite j'ai fais une variante de ce que tu m'as proposé, et ça marche bien

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
    function codeLatLng(lat, lng, where) {
	  geocoder = new google.maps.Geocoder(); //module pour récupérer un nom en fonction des coordonnées GPS
	  var latlng = new google.maps.LatLng(lat, lng);
	  geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
        	document.getElementById(where).innerHTML = results[0].formatted_address;
        }
        else {
            alert("Geocoder failed due to: " + status);
        }
      });
    }
 
//...
 
<table>
 
//...
 
<td id="start">
  <script type="text/javascript">
    var start = "";
    start += codeLatLng(47.206927,-1.555082, "start");
  </script>
</td>
 
<td id="end">
  <script type="text/javascript">
    var end = "";
    end += codeLatLng(47.262378,-1.553621, "end");
  </script>
</td>
 
//...
 
</table>

Merci pour l'aide

**NoSmoking** · 30/04/2011, 16h28

Envoyé par erwah

Toujours pas, mais tu m'a mis sur une piste, du coup je pense pouvoir trouver une solution, je poste ça si ça marche. Merci

...il faut effectivement que les éléments qui reçoivent les textes aient été crées dans la page.

Il eut mieux valu que je mettes comme exemple ceci

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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div><b>DEPART</b><br>
  <span id="depart"></span>
</div>
<div><b>ARRIVEE</b><br>
  <span id="arrivee"></span>
</div>
<script type="text/javascript">
function codeLatLng( lat, lng, where) {
  var geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(results, status){
    // element ou l'on va ecrire
    var oElem = document.getElementById( where);
    // action suivant resultat
    if( status == google.maps.GeocoderStatus.OK) {
      var str = results[0].formatted_address;
      oElem.innerHTML = str;
    }
    else{
      oElem.innerHTML = "Geocoder failed due to: " + status;
    }
  });
}
// appel des fonctions
codeLatLng( 47.206927, -1.555082, "depart");
codeLatLng( 46.206927, -1.450082, "arrivee");
</script>
</body>
</html>

...dans ce cas le script est appelé après création du document

On obtiens la même chose en ajoutant l'appel aux fonctions sur le onload du document

**erwah** · 05/05/2011, 12h38

re,

Je vais devoir à nouveau solliciter ton aide, car j'utilise le bout de code que j'ai posté précédement dans une boucle. Du coup je fais plusieurs appels à ma fonction codeLatLng. Google Maps me renvoie un "OVER_QUERY_LIMIT" après 5 requêtes. Une idée pour contourner le problème ?

Autre problème qui se rapproche d'avantage du problème précédent
J'ai rajouté ce bout de code dans la fonction d'initialisation de la carte :

Code :

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

1
2
3
4
5
6
7
8
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
document.getElementById("SouthWestLat").innerHTML = bounds.getSouthWest().lat();
document.getElementById("SouthWestLng").innerHTML = bounds.getSouthWest().lng();
document.getElementById("NorthEastLat").innerHTML = bounds.getNorthEast().lat();
document.getElementById("NorthEastLng").innerHTML = bounds.getNorthEast().lng();
}
);

Code :

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

1
2
3
4
</br><input type="hidden" id="NorthEastLat" name="NorthEastLat"/>
</br><input type="hidden" id="NorthEastLng" name="NorthEastLng"/>	
</br><input type="hidden" id="SouthWestLat" name="SouthWestLat"/>
</br><input type="hidden" id="SouthWestLng" name="SouthWestLng"/>

Il me permet de récupérer les coordonnées de la zone illustrée par la carte dès que celle-ci est modifiée. J'aimerais récupérer ces coordonnées lorsque je soumet mon formulaire php en les mettant dans des input hidden du formulaire. Mais je n'arrive pas a les remplir avec innerHTML, alors que ça marche très bien avec l'autre fonction.

Y-a-t-il un moyen plus simple (ou qui marche) pour ajouter des champs au formulaire avec du javascript ?

**NoSmoking** · 05/05/2011, 22h37

Je vais devoir à nouveau solliciter ton aide, car j'utilise le bout de code que j'ai posté précédement dans une boucle. Du coup je fais plusieurs appels à ma fonction codeLatLng. Google Maps me renvoie un "OVER_QUERY_LIMIT" après 5 requêtes. Une idée pour contourner le problème ?

ta fonction codeLatLng fait appel à geocode qui fait la requête, il semble donc qu'il y ai une surexploitation de ta part du serveur...
Une solution pourrait être d'étaler tes demandes via des setTimeout ou mieux peut-être en ne lançant une requête que quand la précédente est traitée.

Il me permet de récupérer les coordonnées de la zone illustrée par la carte dès que celle-ci est modifiée. J'aimerais récupérer ces coordonnées lorsque je soumet mon formulaire php en les mettant dans des input hidden du formulaire. Mais je n'arrive pas a les remplir avec innerHTML, alors que ça marche très bien avec l'autre fonction.

les INPUTs n'ont pas d'innerHTML mais des values, donc

Code :

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

document.getElementById("NorthEastLng").value = bounds.getNorthEast().lng();

**tina24** · 06/05/2011, 12h36

bonjour,
j'ai une remarque sur le premier code dans la ligne 15 que après le objet map il y un E :
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);e

je pense que est une erreur de tapage

et merci et bonne chance

**erwah** · 06/05/2011, 15h36

j'ai une remarque sur le premier code dans la ligne 15 que après le objet map il y un E :

c'est en effet une erreur qui n'apparait pas (plus) dans mon programme

les INPUTs n'ont pas d'innerHTML mais des values, donc

logique, mais j'ai pas assez de recul par rapport à ces langages. Merci pour l'aide, tout fonctionne parfaitement dans mon programme maintenant, j'ai juste à régler le problème d'over_query_limit, en mettant en paramètres de codeLatLng une liste, un tableau ou un vecteur de données. Je vais voir selon la doc que je vais trouver

**NoSmoking** · 06/05/2011, 16h08

Envoyé par erwah

... maintenant, j'ai juste à régler le problème d'over_query_limit, en mettant en paramètres de codeLatLng une liste, un tableau ou un vecteur de données. Je vais voir selon la doc que je vais trouver

en reprenant l'exemple que je t'ai fourni plus haut, il te suffit, si la requête à échouée de la relancer à l'aide d'un setTimeout, ce qui peut donné

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
function codeLatLng( lat, lng, where) {
  var geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(results, status){
    // element ou l'on va ecrire
    var oElem = document.getElementById( where);
    // action suivant resultat
    if( status == google.maps.GeocoderStatus.OK) {
      var str = results[0].formatted_address;
      oElem.innerHTML = str;
    }
    else{
      // on traite l'erreur OVER_QUERY_LIMIT
      if( status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT){
        // relance la requete
        setTimeout( function(){
          codeLatLng( lat, lng, where); // rappel fonction avec meme param
        }, 200);
      }
      else{
        // affichage erreur
        oElem.innerHTML = "Geocoder failed due to: " + status;
      }
    }
  });
}

**erwah** · 06/05/2011, 16h18

ça peut le faire, le problème c'est qu'il faut attendre, et comme je peux avoir une centaine de champs à remplir, ça risque d'être long.
Moi je pensais plutôt appeler geocode une seule fois, mais en réfléchissant, je pense pas qu'il puisse traiter un tableau en parametre d'entrée, donc la seule solution est celle que tu propose :/

**NoSmoking** · 06/05/2011, 16h36

si l'on considère 100 requêtes limitées à 5 requêtes par seconde il te faut, sans erreur OVER_QUERY_LIMIT, déjà 20s c'est déjà looooooong, alors avec le temps de latence cela devient interminable, enfin pour moi.

La question qui se pose est de savoir si tu es obligé d'attendre d'avoir tous tes points définis pour faire la demande?

- Si les points sont saisis, voir cliqués au fil de l'eau, autant faire l'appel une fois pris connaissance de celui ci.
- Si les points sont dans un fichier chargé autant mettre les adresses préalablement récupérées.

**erwah** · 06/05/2011, 16h44

En faite j'ai une liste statique (dans un table html) qui se recharge à chaque fois qu'un formulaire php est envoyé. Cette liste affiche les adresses de depart et d'arrivé.

Pour l'instant j'ai un jeu de données de test qui font que la liste depasse rarement 10 lignes. Mais à l'avenir, le jeu de données va s'agrandir, et donc la liste s'allonger.

L'astuce du timeout peut être une façon temporaire de traiter le problème, mais pas définitive. Je crois qu'il y a une sorte de "compte premium" Google qui permet de faire sauter cette limite. Mais sinon je ne vois pas comment contourner le pb. Si tu as une idée ...

**NoSmoking** · 10/05/2011, 19h19

L'astuce du timeout peut être une façon temporaire de traiter le problème, mais pas définitive. Je crois qu'il y a une sorte de "compte premium" Google qui permet de faire sauter cette limite. Mais sinon je ne vois pas comment contourner le pb. Si tu as une idée ...

tu l'écris toi même, la solution est peu être sur le "compte premium".

Je penses que le mieux reste quand même de le faire avant si ta table est statique.

L'astuce du timeout peut être une façon temporaire de traiter le problème, mais pas définitive.

l'astuce régle temporairement le problème de façon définitive

récupérer une adresse avec reverse geocode

APIs Google

Discussions similaires

Partager

Partager