Comment faire
HTML : Formulaire HTML
<input type="text" placeholder="Indiquer une adresse" id="adresse" style="line-height:24px; padding:8px; border:1px solid #444; width:55%;" />
<button onclick="getCoordonnees();" style="line-height:24px; display:inline-block; padding:8px;">Géolocaliser</button>
Appel de la fonction getCoordonnes(), lors du clique sur le bouton.
HTML : Le contenant du résultat
<div id="resultat" style="border-top:1px solid #ddd; padding:8px; margin-top:24px;"></div>
l'élément du HTML dans lequel le résultat s'affichera.
Javascript : Création de la fonction et récupération de la valeur du champ
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function getCoordonnees() {
var adresse = document.getElementById( 'adresse' ).value;
}
</script>
La variable adresse contient les informations insérées dans le champs par l'utilisateur qui seront traitées par l'API de Google dans l'étape suivante.
Javascript : Envoi de l'adresse et traitement des données JSON reçues
var geocoder = new google.maps.Geocoder();
if( geocoder ) {
geocoder.geocode({ 'address': adresse }, function ( results, status ) {
if( status==google.maps.GeocoderStatus.OK ){
var resultat = 'Latitude : ' +
results[0].geometry.location.lat() +
'<br />Longitude : ' +
results[0].geometry.location.lng();
document.querySelector( '#resultat' ).innerHTML = resultat;
}else{
var resultat = 'L\'adresse indiquée n\'a pas été reconnue par Google maps.';
document.querySelector( '#resultat' ).innerHTML = resultat;
}
});
}else{
var resultat = 'Google maps ne semble pas répondre...';
document.querySelector( '#resultat' ).innerHTML = resultat;
}
Appel de l'objet "google.maps.Geocoder()" afin d'y faire la requête à l'API de Google avec le contenu de la variable "adresse".
Google Maps donne une réponse au format JSON. Consulter la documentation de Google API, pour voir en détail la structure et du format JSON.
Une fois la latitude et la longitude récupérées, elles sont directement insérées dans la variable "resultat" qui affichera le résultat dans l'élément du HTML qui porte l'identifiant (id) resultat.