Adresse de remplissage automatique + API Google Maps

Je souhaite présenter mes utilisateurs avec une zone de texte dans laquelle ils peuvent entrer leur adresse. Comme ils tapent leur adresse, je veux fournir aux utilisateurs des suggestions/prédictions de l'adresse qu'ils essaient de taper. Je suis également préoccupé par la pertinence de cette adresse (par exemple que l'adresse n'est pas une adresse à l'autre bout du monde).Adresse de remplissage automatique + API Google Maps

Est-ce possible? J'utilise jQuery.

Source

2010-10-30 StackOverflowNewbie

Ce n'est pas question probablement jquery. Vous avez besoin de taper avec des fournisseurs tiers qui vous fournissent l'adresse à l'exécution, comme les services QAS. – kobe

Je ne sais pas s'il y a des fournisseurs gratuits, nous avons mis en œuvre dans notre entreprise et utilisé QAS. – kobe

http://www.qas.com/home.htm, vérifiez si c'est ce que vous essayez de mettre en œuvre. – kobe

Vous pouvez utiliser l'API Google Adresses pour la saisie semi-automatique de l'adresse. Lorsque l'adresse est sélectionnée, le champ address_components contient des données d'adresse structurées (par exemple, rue, ville, pays) et pourrait être facilement converti en champs séparés.

Voici une démonstration de travail courte:

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    </head> 
    <body> 
     <input type="text" id="address" style="width: 500px;"></input> 

     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script> 
     <script> 
      var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {}); 

      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
       var place = autocomplete.getPlace(); 
       console.log(place.address_components); 
      }); 
     </script> 
    </body> 
</html>

Source

2011-07-28 07:35:19

Y a-t-il un moyen de le faire remplir automatiquement une entrée différente? Donc, si vous commencez par entrer la première ligne et vous donne l'option de l'adresse, lorsque vous cliquez dessus, il remplit automatiquement l'adresse à travers un certain nombre d'entrées? –

comment puis-je montrer l'emplacement sélectionné sur la carte s'il vous plaît aidez-moi – Erum

Wow, c'était incroyablement facile et simple, merci l'homme! – Brian

Jetez un oeil à address-suggestion et the demo. Il est implémenté avec jQuery et l'API geocode Google Maps.

Source

2011-11-28 03:49:31 user471245

https://github.com/ubilabs/geocomplete devrait fonctionner pour vous. Vous pourrez également afficher une carte, si nécessaire.

Si vous utilisez le plugin sans afficher de carte, vous devez afficher le logo "powered by Google" sous le champ de texte.

Source

2012-11-21 17:35:20 DreifGenov

Exécution de la version @Maksym Kozlenko réponse Pour ceux qui veulent voir cela en action.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <input type="text" id="address" style="width: 500px;"></input> 
 

 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script> 
 
     <script> 
 
      var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {}); 
 

 
      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
       var place = autocomplete.getPlace(); 
 
       console.log(place.address_components); 
 
      }); 
 
     </script> 
 
    </body> 
 
</html>

Source

2016-01-02 09:52:49

Vous devez utiliser une clé API.

Voir référence here.

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    </head> 

    <body> 
     <input type="text" id="address" style="width: 500px;"></input> 

     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIWSqJ5-3D-UviE0ZLO4U6AjhVcn58y4g&libraries=places&callback=initMap"></script> 
     <script> 
      function initMap(){ 
       var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {}); 

       google.maps.event.addListener(autocomplete, 'place_changed', function() { 
        var place = autocomplete.getPlace(); 
        console.log(place.address_components); 
       }); 
      } 
     </script> 
    </body> 
</html>

Source

2016-07-13 09:09:44

Adresse de remplissage automatique + API Google Maps

Répondre

Questions connexes