Как создать поле автозаполнения с картами google api?

Ответ 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

Ответ 2

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

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

• Пользователь вводит: почтовый (zip) код

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

• Пользователь начинает вводить: имя улицы

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

• Вы показываете: диапазон разрешенных адресов

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

Готово.

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

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

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

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

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

• Пользователь вводит город

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

• Пользователь вводит: состояние/провидение

  Вы: стоит ли автофинировать несколько символов?

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

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

Я использую только bootstrap и JQuery.

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

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

Ответ 6

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

Сначала включите веб-службу 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>

Используйте файл script для загрузки класса автозаполнения. Ваш файл 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);
}