Aide à la saisie des adresses avec google map -- JQuery JavaScript google map address form autocomplete

Si un jour vous avez eu a faire a la saisie d'un formulaire d'inscription sur un site internet vous avez certainement trouvé long de remplir tous les champs des formulaires un par un . Et si vous développez vous même ce genre de formulaires vous avez certainement cherché a automatiser le remplissage des champs du moins au mieux
Voici un plugin JQUERY qui pourrais vous facilité la complétion automatique des champs d'adresse , nom de rur, code postal , ville , pays ...
le plugin est base sur l'API GOOGLE MAP qui vous assiste lors de la saisie des adresse
pour mettre en place ce plugin n'ouliez pas d inclure JQUERY etgoogle map dans vos pages comme ceci :

puis définir le plugin lui même que vous pouvez faire dans la même page ou dans un fichier JS séparé comme ceci:

$(function (){

 $.fn.googleMapAuocompleteAddress = function(opt) {
    var options = $.extend({}, {
    }, opt);
   // each : si le plugin est énumérer tous les éléments du selector   
         return this.each(function(i, e){
             //l’élément a qui s’applique le plugin ne peut etre qu un champs input
              if(! $(this).is("input"))return ;
         var autocomplete = new google.maps.places.Autocomplete($(this).get(0));
         //Définir le champs comme autocomplete
       //Attacher un évènement chaque fois que l’adresse saisie change   
       google.maps.event.addListener(autocomplete, 'place_changed', function() {
          //Récupérer les lieux correspondants a l adresse saisie 
           var place = autocomplete.getPlace();
   //Récupérer les composants de l adresse    
    var componenents=place.address_components||[];
    var ln=componenets.length;
     for (var i=0 ; i<ln;i++) { 
            var editor=$("[data-role|="+componenets[i].types[0]+"]"); 

             //Regarder tous les elements html dont l'attribut data-role
             // ressemble a street_number, route,locality,postal_code,country ...

   if(editor.is("input")){
       editor.val(componenets[i].long_name);
                     //si l'element est un champs on rempli sa valeur
   }else{
                     //sinon son html 
      editor.html(componenets[i].long_name);
   }//end if 
   }//end for 
        
 });//end addListener 
     });//end each  
   };//end googleMapAuocompleteAddress
});

Voici maintenant un exemple d'utilisation de ce plugin

 

 Numero

 Rue

 Ville

 Code postal

 Pays

Vous tester directement ici le résultat voici un Plunker