Вторник, 11 августа 2020 00:59

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

Проголосуйте
(0 votes)
Содержание: [Скрыть]

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

    Маршрут

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

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

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

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

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

    пример схемы проезда от google на сайте
  • Панорама улиц

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

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

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

    пример установленного виждета
  • Подключение Google карты на сайт

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

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

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

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

    Выводы

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

    Прочитано 37 раз Последние изменения внесены ⇒ Вторник, 11 августа 2020 00:59