Como fazer um campo de endereços auto-completo com a api do 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;            
    });
});

À deriva um pouco, mas seria relativamente fácil preencher automaticamente a cidade/estado dos EUA ou a cidade de CA/Provence quando o utilizador entra no seu código postal usando uma tabela de procura.

1. O utilizador entra: código postal (zip)

   Você preenche: estado, cidade (província, para o Canadá) {[[2]}

2. O Utilizador começa a introduzir: nome de rede

   Tu: autofill

3. Você mostra: um intervalo de números de endereço permitidos

   Utilizador: indica o número

1. O utilizador entra: Número de endereço

   Tu: não faças nada

2. O Utilizador começa a indicar: nome da rua

   Você: autofill, a partir de uma enorme lista de todas as ruas da país

3. O utilizador entra: city

   Você: auto-preenchimento

4. O utilizador entra: state / provence

   Vale a pena auto-encher alguns copos?

5. Você: autofill código postal (zip), se você puder (porque alguns códigos straddle cidades).

Para o endereço da rua, considere que existem duas partes: numérica e o nome da rua. Se você tem o Código Postal, então você pode restringir as ruas disponíveis, mas a maioria das pessoas entra na parte numérica primeiro, que é backwa

Eu realmente duvido disso--a API do google maps é óptima para geocodificar endereços conhecidos, mas geralmente devolve dados que são adequados para operações de auto-completação. Nevermind the challenge of not hitting the API in such a way as to eat up your geocoding query limit very quickly.

É fácil, mas os exemplos da API do Google dão-lhe uma explicação detalhada sobre como conseguir que o mapa mostre o local indicado. Para apenas completar automaticamente o recurso, você pode fazer algo assim.

Primeiro, active o serviço web da API do Google Places. Vai buscar a chave da API. Você terá que usá-lo na tag script no arquivo 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>

Usar o ficheiro do programa para carregar a classe de completação automática. Os vossos guiões.o ficheiro do js vai ser parecido com isto.

    // 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);
}

Só uso presilha e JQuery.

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