Как сделать автозаполнение адресного поля с API Google Maps?

Question

Используя Google Maps API и JQuery, я хотел бы иметь поле адреса, которое при вводе текста будет автоматически заполнять введенный там адрес. Как этого можно достичь?

Answer 1

Ну, лучше поздно, чем никогда. API карт Google v3 теперь обеспечивает автозаполнение адреса.

Документы API здесь: http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete

Хороший пример здесь: http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

Answer 2

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

Answer 3

Немного дрифтинга, но было бы относительно легко автозаполнить город США / штат или город / прованс CA, когда пользователь вводит свой почтовый индекс с помощью справочной таблицы.

Вот как вы могли бы сделать это, если бы вы могли заставить людей подчиниться вашей воле:

1. Пользователь вводит: почтовый индекс

   Вы заполняете: штат, город (провинция, для Канады)

2. Пользователь начинает вводить: название улицы

   Вы: автозаполнение

3. Отображается: диапазон разрешенных номеров адресов

   Пользователь: вводит число

Готово.

Вот как это естественно для людей:

1. Пользователь вводит: номер адреса

   Вы: ничего не делать

2. Пользователь начинает вводить: название улицы

   Вы: автозаполнение, опираясь на огромный список каждой улицы страны

3. Пользователь вводит: город

   Вы: автозаполнение

4. Пользователь вводит: Штат / Прованс

   Вы: стоит ли автозаполнение нескольких символов?

5. Вы: автозаполнение почтового (почтового) кода, если вы можете (потому что некоторые коды находятся в разных городах).

---

Теперь вы знаете, почему люди берут $$$ за это. :)

В качестве адреса улицы рассмотрим две части: числовое и название улицы. Если у вас есть почтовый индекс, вы можете сузить доступные улицы, но большинство людей сначала вводят числовую часть, то есть backwa

Answer 4

Это просто, но примеры Google API дают вам подробное объяснение того, как вы можете получить карту для отображения введенного местоположения. Только для функции автозаполнения вы можете сделать что-то вроде этого.

Сначала включите веб-службу API Google Адресов. Получить ключ API. Вам придется использовать его в теге script в 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>

Используйте файл сценария для загрузки класса автозаполнения. Ваш файл scripts.js будет выглядеть примерно так:

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

Answer 5

Я действительно в этом сомневаюсь - API карт Google отлично подходит для геокодирования известных адресов, но обычно возвращает данные, подходящие для операций в стиле автозаполнения. Не берите в голову задачу не использовать API таким образом, чтобы очень быстро поглотить лимит запросов геокодирования.

Answer 6

Есть несколько замечательных библиотек, таких как select2, но они не соответствуют моим потребностям. Я сделал образец с нуля, чтобы использовать простой ввод текста.

Я использую только загрузчик и JQuery.

Надеюсь, это будет полезно

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