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>