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();

récupérer une adresse avec reverse geocode

APIs Google

Vue hybride

Discussions similaires

Partager

Partager