API geolocalisation et Geocoder

Version imprimable

Bonjour tout le monde,

Mon problème c'est comment donner le nom de la ville via les coordonnées détecter par l'API de google et l'afficher automatiquement dans zone de texte en utilisant reverse geocoding, ce que j'ai pu faire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 400px; width: 400px; margin-top:20px; margin-left: 300px; padding: 0  }
      input {
        border: 1px solid  rgba(0, 0, 0, 0.5);
        margin-left: 300px;
        margin-top: 15px;
      }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD73avm1txqxmMX2GpFvz1U-Rfj7KcgEb8&sensor=false&libraries=places">
    </script>
    <script type="text/javascript">

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
     // Référence : https://developers.google.com/maps/documentation/javascript/?hl=FR
    window.addEventListener("load", 
	function()
	{
        geocoder = new google.maps.Geocoder();
      	if(navigator.geolocation)	// Si la geolocalisation est disponible
		{
			navigator.geolocation.getCurrentPosition(	// Demande d'un repérage GPS.
			function(pos)	// La fonction de callback reçoit un objet de positionnement
			{
				var latitude = pos.coords.latitude;
				var longitude = pos.coords.longitude;	// Lecture des valeurs.
 
 
                var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
                var autocomplete = new google.maps.places.Autocomplete(input);
 
 
			});
		}
		else	// Si le service n'est pas disponible
		{
			console.log("service ou données non disponible");
		}
 
    });

Code:

1
2
3
4
5
6
7
8
9
    </script>
  </head>
  <body>
        <div id="panel">
            <input id="searchTextField" type="text" size="50">
        </div>
        <div id="map-canvas"/>
  </body>
</html>

06/10/2013, 17h31
NoSmoking

Bonjour,
je penses avoir fini par comprendre ce que tu essaies de faire, mais il te manque une action de taille, c'est la requête utilisant le google.maps.Geocoder.

Je te mets également ce lien qui peut t’intéresser :fleche: L'API geolocalisation en HTML5, exemple #2.

Merci pour votre guide, j'ai passé un bon temps la dessus et j'ai trouvé la solution.

Pour vous en servir voila un bout de code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function (pos) {
  var latitude = pos.coords.latitude;
  var longitude = pos.coords.longitude; // Lecture des valeurs.
  var geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(latitude, longitude);
  geocoder.geocode({
    'latLng': latlng
  }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var laville = results[0].address_components[4].long_name;
      document.getElementById('ville').value = laville;
    }
  });
}

06/10/2013, 22h06
NoSmoking

Permet moi d'être surpris de ta façon de traiter le résultat. results[0].address_components[4].long_name ne te garantie aucunement de récupérer la ville, les données n'étant pas forcément au même endroit et ce suivant le type d'adresse.

Il te faudrait parcourir le tableau d'address_components et de vérifier si dans le tableau types il existe 'locality'.