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

Прежде чем приступить к работе с Maps API, вам необходимо создать проект в Google Cloud Console. Следующая документация проведет вас через эти предварительные шаги:



Настройка в Google Cloud Console | Карты JavaScript API | Google Developers
В этом руководстве показано, как настроить проект Google Cloud перед использованием API платформы Google Maps. Хотя у вас может быть…developers.google.com



Если у вас есть проект, обязательно включите следующие API:

Отсюда выберите раздел Credentials в меню навигации и выберите Create Credentials API key:

Теперь, когда ваши API включены и ваш ключ сгенерирован, вы готовы начать кодирование.

Есть три основных компонента, которые потребуются вашей HTML-странице для использования Maps API и автозаполнения:

  1. Элемент div с идентификатором карты для хранения карты
  2. Тег script для загрузки Maps JavaScript API (убедитесь, что высота этого элемента div явно указана, иначе карта не будет отображаться).
  3. Div с элементом ввода для присоединения автозаполнения к

Функция initMap вызывается при загрузке страницы и должна быть определена в вашем файле JavaScript. чтобы создать карту с начальным центром города Нью-Йорка, следуйте приведенному ниже примеру.

Здесь используется конструктор карт Google для создания карты в div с идентификатором карты. Конструктор карты требует, чтобы элемент поместил карту, а также объект параметров. Для этого объекта требуется два параметра (центр и масштаб), но есть много параметров, которые можно использовать для настройки карты в соответствии с вашими потребностями.

Как только карта будет на месте, вы можете вставить свой входной элемент div в карту, используя следующий код:

Теперь мы готовы реализовать автозаполнение библиотеки Places.

В приведенном выше примере мы создали объект параметров для передачи конструктору автозаполнения. Свойство types указывает автозаполнению искать заведения. Когда пользователь выбирает результат автозаполнения, вызывается метод getPlace и возвращает данные, указанные в параметре fields.

Остался единственный шаг — привязать границы поиска автозаполнения к границам окна просмотра карты:

Теперь автозаполнение будет искать заведения в пределах вашей карты!