г. Москва, наб Пресненская, д. 8, стр. 1
Войти
Логин
Пароль
Зарегистрироваться
После регистрации на сайте вам будет доступно отслеживание состояния заказов, личный кабинет и другие новые возможности
Заказать звонок

Google Maps: как создать и добавить интерактивную карту Google на сайт

Содержание

  1. Как добавить Google Карту
  2. Настройка на сайте Google Maps API
  3. Как получить Google Maps API Key

Более 70% людей регулярно используют Гугл Карты, если необходимо найти адрес или местоположение. Иным словами, клиенты смогут находить вас на Гугл Картах по названию вашей компании, а также по целевым поисковым запросам.

Рекомендуемые решения

Вот еще несколько причин вставить Google Карту на ваш сайт:

  • Вероятно, что потенциальный клиент предпочтет ваши услуги, поскольку наличие интерактивной карты на вашем сайте выглядит более профессионально, чем просто строка с адресом.
  • Кроме того, с доступом к виджету Google карты, клиентам не нужно покидать вашу страницу.
  • Возможность получения отзывов на странице в Гугл Бизнес.
  • Клиенты смогут прокладывать маршрут к вашему офису.

Добавить Google Карту на сайт не составит труда и займет всего несколько минут. Рассказываем, как это сделать.

Вставить на сайт Google Карту очень просто, процедура занимает не более пары минут. Чтобы добавить через html google map, необходимо:

  1. Перейти по ссылке на http://maps.google.ru/maps и ввести в графу поиска адрес месторасположения.
  2. Нажать на кнопку с надписью «Поделиться».
  3. В открывшемся окне, которое откроется на экране, перейти в раздел «Встраивание карт».
  4. Выбрать из предложенных вариантов подходящий размер карты.
  5. Нажать кнопку с надписью «Копировать HTML».

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

Настройка на сайте Google Maps API

С 2018 года использование сервиса Google Maps без API ключа больше не поддерживается. Поэтому если у вас на текущем сайте всплывает ошибка при загрузке Google Карт и на карте отображается надпись For development purposes only - требуется получить Google Maps API Key.

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

Основные плюсы API Google

Сервис имеет несколько преимуществ, которые представляют интерес не только для программистов, но и обычных пользователей:

  • Простота. Довольно простой и удобный в использовании сервис - пользователю достаточно указать свое местонахождение и прописать те данные, которые будут отображаться на карте. Далее появится маркер. Нажав на него, пользователь увидит всю актуальную информацию об объекте.
  • Качественная визуализация. Посетители сами разберутся, как дойти или доехать до нужного объекта.
  • Доступный функционал. Интерактивный сервис можно оформить под тематику сайта, расширяя его возможности в соответствии с потребностями посетителей.
  • Предусматривает возможность добавления отзывов, которые отображаются рядом с контактными данными объекта.
  • Позволяет добавлять необходимую информацию обо всех филиалах и магазинах компании, а также о дочерних предприятиях.
Рекомендуемые решения

Как получить Google Maps API Key

Чтобы получить Google Maps API Key, необходимо:

  1. Войти в свой аккаунт на сайте Google либо создать новый.
  2. Перейти по ссылке: https://cloud.google.com/maps-platform/ на платформу и нажать на кнопку с надписью «Get Started». В диалоговом окне, которое появится на экране, выбрать «Maps» («Карты»), а после кликнуть «Continue» («Продолжить»).
  3. Выбрать Maps и нажать CONTINUE. Из списка, который появится на экране, выбрать «+ Create a new project», ввести произвольное название и нажать NEXT.
  4. После создания платежного аккаунта подключить систему оплаты за пользование API. Если нет желания указывать основную карту, можно создать виртуальную и перевести на нее сумму, эквивалентную 1, а далее подключить ее.
  5. Выбрать страну из списка, изучить условия использования и нажать «Принять и продолжить».
  6. Ввести реквизиты карты. После проверки Google спишет со счета 1, а потом вернет всю сумму обратно. После подключения платежного аккаунта на него будет начисляться каждый месяц использование мест, маршрутов и карт на сумму, равную 200. Это около 28 000 запросов. Счета выставляются только в том случае, когда использование Google Maps Platform превышает лимит в 200.
  7. После получения API ключа его необходимо скопировать и сохранить для дальнейшего использования.
  8. Чтобы ключ не попал к третьим лицам и оставался действительным, для него необходимо включить ограничения. Для этого достаточно перейти в «Защитить учетные данные». Здесь выбирается вкладка «Допустимый тип приложений», а после - «HTTP-источники перехода». Далее вам необходимо вставить в необходимом формате свой сайт, проверив доступен ли он по HTTP либо HTTPS и WWW поддомену. Если возникнет такая необходимость, добавляйте все возможные варианты доменных имен и поддоменов. В том случае, когда это поле остается пустым, API-ключ автоматически становится доступен для использования с любыми интернет-ресурсами.
  9. Переключиться на соседнюю вкладку под названием «Допустимые API» и выбрать «Maps JavaScript API».
  10. После API ключ передается разработчикам, используется в коде либо в соответствующем модуле CMS-системы.

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

Популярные категории

Назад к списку



ЧЕРЕЗ
N сек.
ты получишь
подарок
Промокод
на скидку
Получить промокод