API geolocalisation et Geocoder

**wperle** · 05/10/2013, 22h44

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 html :

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
<!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 :

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
     // 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 html :

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

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>

**NoSmoking** · 06/10/2013, 17h31

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

L'API geolocalisation en HTML5, exemple #2.

**wperle** · 06/10/2013, 17h54

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 :

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

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

**NoSmoking** · 06/10/2013, 22h06

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'.

API geolocalisation et Geocoder [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager