par

Je cherche un moyen de mettre en place un script d'auto-complétion d'adresses sur un formulaire HTML. Je sais que Google propose une API pour cela. Quel script dois-je utiliser ?

1 Réponse

+1 validé
par

Pour mettre en place un script d'auto-complétion d'adresses avec l'API v3 de Google Map, vous devez préalablement obtenir un clé d'accès à l'API.

Pour cela rendez-vous sur https://developers.google.com/maps/documentation/javascript/?hl=Fr

Voici ensuite le script HTML et JavaScript à utiliser pour l'auto-complétion des adresses :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=PLACEZ_CLE_API_ICI&libraries=places"></script>
</head>
<body>
<input id="id_Input_Adresse">
<script type="text/javascript">
function ini_Autocompletion(id) 
{
  var element = document.getElementById(id);
  if (element) 
  {
    var autocompletion = new google.maps.places.Autocomplete(element, { types: ['geocode'] });
    google.maps.event.addListener(autocompletion, 'place_changed', ini_Adresse);
  }
}

function ini_Adresse() 
{
  var place = this.getPlace();
   console.log(place);
  for (var i in place.address_components) 
  {
    var component = place.address_components[i];
    for (var j in component.types) 
	{
      var type_element = document.getElementById(component.types[j]);
      if (type_element) 
	  {
        type_element.value = component.long_name;
      }
    }
  }
}

google.maps.event.addDomListener(window, 'load', function() 
{
  ini_Autocompletion('id_Input_Adresse');
});
</script>
</body>
</html>

Voici un screenshot du rendu :

Remarque : Vous devez insérez votre clé d'API à la ligne numéro 4.

Offre Sponsorisée

Ailleurs sur le Web

Lecture Recommandée

Edward Snowden - Mémoires vives

"Je m'appelle Edward Joseph Snowden. Avant, je travaillais pour le gouvernement mais aujourd'hui je suis au service de tous. Il m'a fallu près de trente ans pour saisir la différence et quand j'ai compris, ça m'a valu quelques ennuis au bureau."

L'homme qui a tout risqué pour dénoncer la surveillance globale, ou l'extraordinaire histoire d'un garçon brillant qui a grandi "en ligne", d'un homme devenu espion, puis lanceur d'alerte, et, en exil, la consciencce de l'internet.

Mémoires vives est un témoignage exceptionnel, également disponible en numérique.

Sujets Connexes

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...