Автозаполнение адреса в текстовом поле Input

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

 

Для начала вы можете просмотреть простой готовый пример текстового поля с данной функцией.

 

Приступаем. Для начала нужно получить специальный API ключ. Без него автозаполнение работать не будет. Переходим в консоль разработчика Google и создаем новый проект.

Автозаполнение адреса в текстовом поле input (скриншот 1)

Далее указываем, что в своем проекте будем использовать Google Maps JavaScript API. И ниже нажимаем на кнопку Выбрать тип учетных данных.

Автозаполнение адреса в текстовом поле input (скриншот 2)

Далее вы увидите свой API ключ. Прежде, чем его копировать, добавим ограничения на его использование.

 

Для чего это нужно? Дело в том, что существует дневной лимит по количеству адресных запросов. И, если кто-то еще будет использовать ваш ключ, лимит может быстро израсходоваться и подсказки выводится не будут. Поэтому стоит внести ограничение.

Автозаполнение адреса в текстовом поле input (скриншот 3)

В типе ограничения выбираем HTTP-источники перехода (веб-сайты). Ниже вводим адрес своего сайта. Чтобы охватить весь сайт, добавьте звездочки до и после домена (*.ваш сайт.ру/*). То есть поддерживается любой поддомен и любая страница сайта.

Автозаполнение адреса в текстовом поле input (скриншот 4)

Сохраняем изменения. Страницу с ключом пока не закрываем.

 

Теперь по сайту. Сперва подключаем специальную библиотеку Google Maps API. Для этого перед тегом </head> вставляем запись. Не забудьте дополнить запись своим ключом!

 

Текстовое поле выглядит следующим образом:

Кстати, id поля может быть любым. Но, если его поменяете здесь, то и в скрипте (ниже) также измените.

 

Скрипт можно разместить сразу под текстовым полем. Но давайте не будем создавать мешанину и вынесем его в отдельный файл. Создаем файл (называем, например, address.js) и размещаем в нем код:

В строке country устанавливается ограничение вывода адресов по России (ru). Для других стран также используются английские сокращения.

 

Этот скрипт подключается к странице также, как и библиотека. Перед </head> прописываем:

Готово, функция автозаполнения подключения к текстовому полю. Проверяйте, тестируйте.

 

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