Google maps – это бесплатное картографическое приложение, которое позволяет в считанные секунды найти любой объект и проложить к нему кратчайший маршрут. Картами можно пользоваться не только в самом приложении, но и установить их к себе на сайт. В этой статье мы расскажем, как правильно это сделать.

Содержание:

Получить бесплатную консультацию от специалиста по вашему проекту

Зачем нужна Google карта на сайте

Оформление страницы контактов влияет на уровень доверия потенциальных клиентов, поэтому старайтесь наполнить ее максимально. 

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

  • увидеть, где находится компания;
  • увеличить или уменьшить масштаб;
  • проложить маршрут;
  • посмотреть количество отзывов и рейтинг компании в Google My Business.

 

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

Если у вас несколько филиалов, Google карта позволит наглядно продемонстрировать, где находится каждый из них. И пользователям не нужно будет искать ближайшее отделение. Они смогут это сделать сразу на сайте.

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

Инструкция как вставить Гугл карту на сайт

В Google Maps есть возможность встроить на сайт:

  • карту проезда с установленной на ней меткой;
  • проложенный маршрут; 
  • изображение просмотра улиц. 

 

Рассмотрим, как получить HTML-код каждого из этих вариантов и добавить его на сайт. 

Карта с меткой

Это самый распространенный и удобный вариант виджета. Чтобы подключить его, выполните следующие действия.

  1. Перейдите в сервис Google Maps
  2. В строке поиска напишите адрес компании, или же найдите необходимую точку на карте и кликните по ней.

    как установить виджет google maps шаг 1
     
  3. Нажмите «Поделиться».

    поделиться адресом компании шаг 2
     
  4. Перейдите во вкладку «Встраивание карт». Здесь вы увидите код iframe карты и превью, как она будет выглядеть на сайте.
  5. Кликнув по стрелке, расположенной слева от кода, вы сможете настроить размер: маленький, средний, большой или собственный.

    как встроить гугл карту с меткой шаг 3
     
  6. Скопируйте полученный код.

 

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

пример оформления схемы проезда

Получить бесплатную консультацию от SEO-эксперта по вашему сайту

Маршрут

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

  1. Аналогично поставьте метку там, где находится ваша компания.
  2. Нажмите “Проложить маршрут”.

    как проложить маршрут в гугл
     
  3. Напишите адрес исходной точки или укажите его на карте.
  4. В левом верхнем углу страницы кликните на значок из 3-х горизонтальных полос и перейдите в Меню.

    способ добавить схему проезда на сайт
     
  5. В появившемся окне выберите пункт «Ссылка/код».

    получить код гугл карт для установки на сайт
     
  6. Перейдите в раздел «Встраивание», установите необходимый размер и скопируйте полученный код.

    пример схемы проезда от google на сайте

Панорама улиц

Если вы хотите встроить не просто схему проезда, а еще и панорамный просмотр улиц, тогда:

  1. Откройте необходимое изображение в Google Maps.
  2. Кликните на 2 вертикальные точки, расположенные возле адреса.
  3. Из открывшегося окна выберите пункт “Поделитесь с друзьями или получите код”.

    как встроить панорамный просмотр улиц google
     
  4. Выберите «Встраивание» и скопируйте код.

    пример установленного виждета

Подключение Google карты на сайт

Теперь, чтобы показать Google Maps пользователям, вам остается только установить iframe в исходном коде сайта и сохранить изменения. В случае необходимости, вы можете подкорректировать размеры, изменив значение атрибутов width (ширина) и height (высота). 

как добавить на сайт google карту картинка

Чтобы карта была адаптивной и менялась в зависимости от размера экрана, укажите ширину 100%. 

Если вы не знаете, как внести изменения в исходный код вашего сайта, поставьте задачу программисту добавить iframe Google карты на выбранную вами страницу.

Выводы

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

P.S. От того, насколько сайт удобен, зависит не только его позиции в поисковых системах, но и объемы продаж. Именно поэтому в курсе «Поисковик» мы выделили отдельное занятие по юзабилити, пройдя которое вы сможете взглянуть на сайт со стороны, улучшить поведенческие факторы и конверсию. Присоединяйтесь к программе по ссылке и с промо-кодом «Maps-10-08» вас будет ожидать приятный бонус.