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

Question

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

Answer 1

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

API Docs здесь: 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

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

Answer 3

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

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

1. Пользователь входит: почтовый (почтовый) код

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

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

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

3. Вы дисплей: диапазон разрешенных номеров адресов

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

Готово.

Вот как это естественно для людей, чтобы сделать это:

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

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

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

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

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

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

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

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

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

---

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

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

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

Answer 5

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

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

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

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

Answer 6

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

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