Как внедрить карту Google на веб-сайт: добавляем карту проезда

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

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

Вот несколько преимуществ из-за которых владельцы бизнеса захотят встроить Google карту на сайт:

  • ресурс заслуживает доверия, поскольку его выбирает большинство пользователей со всего мира;
  • это сэкономит время на объяснение каждому человеку/клиенту/гостям;
  • есть вероятность, что потенциальный клиент воспользуется именно вашей услугой, поскольку интерактивная карта на вашем сайте выглядит более профессионально и современно, чем обычная строка с адресом;
  • пользователям нет необходимости покидать вашу страницу, что будет увеличивать ваш показатель отказа;
  • это бесплатно, а также от вас не потребуется никаких усилий и больших временных затрат.

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

геолокация компании на Google КартахНаглядный пример отображения геолокации компании на Google Картах

Как добавить Google карту на свой веб-сайт?

Прежде всего, необходимо зарегистрировать компанию в сервисе Google My Business. Обратите внимание, что компания уже может существовать на картах. Введите название компании в проверочную форму. Если она была зарегистрирована ранее, остальная информация подтянется автоматически. В случая же, если вашей компании нет на картах гугл, вам нужно будет ее добавить.

Для этого необходимо выполнить несколько простых действий:

  1. Укажите название вашей компании, в появившемся окне регистрации.

Google My Business

  1. Выберите категорию, которая больше всего подходит вашему бизнесу.
  2. Укажите адрес расположения вашей компании (он будет отображаться в результате на картах).
  3. Укажите контактные данные и адрес вашего веб-сайта, после чего регистрация будет завершена.

В поиске ваш профиль в Google будет выглядеть следующим образом:

 ваш профиль в Google

Создание профиля компании в Google My Business не обязательно, однако, ваша точка геолокации с наличием аккаунта будет выглядеть привлекательней с отображением отзывов о вашей компании:

 отзыв о вашей компании

А вот как выглядит точка компании на карте без профиля Google My Business:

Пример точки компании без профиля Google My Business

Интеграция с Google maps с использованием кода Iframe, встроенного из Google

В этом разделе будет рассказано о копировании кода внедрения Google из карт Google в HTML-код сайта. Никакой другой код форматирования не применяется.

Как получить код для встраивания Google

  1. Перейти на Google Карты.
  2. Введите адрес компании в строку поиска, затем нажмите кнопку поиска.
  3. Щелкните значок Поделиться.
  4. Выберите «Вставить карту».
  5. Выберите размер карты из раскрывающегося списка.
  6. Выберите и скопируйте HTML-код внедрения iframe.

код для встраивания Google картыВставьте этот код на свою HTML-страницу или виджет.

Пример кода:

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

Эта карта имеет статическую ширину и высоту. Размер можно настроить, изменив эти атрибуты размера.

Также, могут быть случаи, в которых у владельцев сайта нет доступа к исходному коду. Например, на платформе Хорошоп.

Рассмотрим принцип добавления Google карт с помощью Iframe на платформе Хорошоп

  1. Прежде всего, аналогично первому случаю, необходимо скопировать код Iframe из Google карт.
  2. Скопированный фрагмент кода необходимо добавить в админке вашего сайта: Настройки → Общие настройки → Дополнительная информация → Код карты и сохраните настройки.

фрагмент кода Google карт

Пример вывода Iframe карты гугл на сайте Хорошоп:

вывод Iframe карты гугл на Хорошоп

Нужно ли платить за Карты Google, чтобы разместить их на веб-сайте?

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