Comment créer un champ d'adresse de saisie semi-automatique avec l'api google maps?

Below I split all the details of formatted address like City, State, Country and Zip code. 
So when you start typing your street name and select any option then street name write over street field, city name write over city field and all other fields like state, country and zip code will fill automatically. 
Using Google APIs.
------------------------------------------------
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
    var places = new google.maps.places.Autocomplete(document
            .getElementById('txtPlaces'));
    google.maps.event.addListener(places, 'place_changed', function() {
        var place = places.getPlace();
        var address = place.formatted_address;
        var  value = address.split(",");
        count=value.length;
        country=value[count-1];
        state=value[count-2];
        city=value[count-3];
        var z=state.split(" ");
        document.getElementById("selCountry").text = country;
        var i =z.length;
        document.getElementById("pstate").value = z[1];
        if(i>2)
        document.getElementById("pzcode").value = z[2];
        document.getElementById("pCity").value = city;
        var latitude = place.geometry.location.lat();
        var longitude = place.geometry.location.lng();
        var mesg = address;
        document.getElementById("txtPlaces").value = mesg;
        var lati = latitude;
        document.getElementById("plati").value = lati;
        var longi = longitude;
        document.getElementById("plongi").value = longi;            
    });
});

Dérive un peu, mais il serait relativement facile de remplir automatiquement la ville/état des États-Unis ou la ville/Provence lorsque l'utilisateur entre son code postal en utilisant une table de recherche.

Voici comment vous pourriez le faire si vous pouviez forcer les gens à se plier à votre volonté:

1. L'utilisateur entre: Code postal (zip)

   Vous remplissez: État, Ville (province, pour le Canada)

2. L'Utilisateur commence à saisir: streetname

   Vous: remplissage automatique

3. Vous affichage: une plage de numéros d'adresse

   Utilisateur: entre le nombre

Fait.

Voici comment il est naturel pour les gens de le faire:

1. Utilisateur entre: numéro d'adresse

   Vous: ne rien faire

2. L'Utilisateur commence à saisir: nom de la rue

   Vous: autofill, dessin à partir d'une liste massive de toutes les rues dans le pays

3. Utilisateur entre: ville

   Vous: remplissage automatique

4. L'utilisateur entre: état / provence

   Vous: vaut-il la peine de remplir automatiquement quelques caractères?

5. Vous: remplissage automatique du code postal (zip), si vous le pouvez (parce que certains codes chevauchent les villes).

Maintenant, vous savez pourquoi les gens facturent $$$ pour le faire. :)

Pour l'adresse, considérez qu'il y a deux parties: numérique et streetname. Si vous avez le code postal, Vous pouvez affiner les rues disponibles, mais la plupart des gens entrent d'abord la partie numérique, qui est backwa

J'en doute vraiment-L'API google maps est idéale pour le géocodage d'adresses connues, mais elle renvoie généralement des données adaptées aux opérations de type saisie semi-automatique. N'oubliez pas le défi de ne pas frapper L'API de manière à dévorer votre limite de requête de géocodage très rapidement.

C'est facile, mais les exemples D'API Google vous donnent des explications détaillées sur la façon dont vous pouvez obtenir la carte pour afficher l'emplacement entré. Pour seulement la fonctionnalité de saisie semi-automatique, vous pouvez faire quelque chose comme ceci.

Tout d'abord, activez le service Web de L'API Google Places. Obtenez la clé API. Vous devrez l'utiliser dans la balise script dans le fichier html.

<input type="text" id="location">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY_HERE]&libraries=places"></script>
<script src="javascripts/scripts.js"></scripts>

Utilisez le fichier script pour charger la classe de saisie semi-automatique. Vos scripts.le fichier js ressemblera à ceci.

    // scripts.js custom js file
$(document).ready(function () {
   google.maps.event.addDomListener(window, 'load', initialize);
});

function initialize() {
    var input = document.getElementById('location');
    var autocomplete = new google.maps.places.Autocomplete(input);
}

Il y a quelques bibliothèques impressionnantes telles que select2, mais cela ne correspond pas à mon besoin. J'ai fait un échantillon à partir de zéro afin d'utiliser un texte d'entrée simple.

Je n'utilise que bootstrap et JQuery.

J'espère que ce sera utile

`https://jsfiddle.net/yacmed/yp0xmdf5/`