Как сделать Google Карту на сайт своей компании

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

В статье расскажем как создать Google карту и добавить ее на сайт.

 

Как создать Google Карту: пошаговая инструкция

Есть 2 способа создать Гугл Карту с помощью кнопки «Поделиться» и сделать свою карту.

 

1 способ: через кнопку «Поделиться»

Сработает, если место уже есть на Гугл Картах. Например, вы арендуете офис в бизнес центре, и его уже добавили на карту до вас.

Заходим на сайт с картами — https://www.google.ru/maps/. Пишем адрес офиса, например, Москва, Пресненская набережная, Москва Сити.

Clipboard01  

 

Затем жмем кнопку «Поделиться».

Clipboard02  

 

Сервис предлагает две возможности поделиться — скопировать ссылку или скопировать код. Так как нам нужно разместить карту на сайте, выбираем «Встраивание карт».

Clipboard03  

 

Выбираем размер карты — средняя, маленькая, большая, свой размер, а затем копируем html-код, он нам понадобится для вставки на сайт. О добавлении карты на сайт через код написано ниже.

Clipboard04

 

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

 

2 способ: создаем свою карту

Мы сначала создаем свою карту, а потом добавляем ее на сайт.

Заходим на сайт Google Maps — https://www.google.ru/maps/ и нажимаем на меню (3 горизонтальных полоски).

Clipboard05  

 

Нам нужен пункт «Мои места».

Clipboard06  

 

А в нем «Карты».

Clipboard07  

 

Пока здесь ничего нет, жмем «Создать карту».

Clipboard08  

 

Базовая карта не имеет названия. Чтобы назвать карту и добавить ей описание, жмем на строчку «Карта без названия».

Clipboard09  

 

Добавляем название и описание, после чего жмем «Сохранить».

Clipboard10  

 

Приближаем карту до нужного населенного пункта, а затем находим улицу и здание. Чтобы добавить точку на нужное здание, нажимаем на значок геолокации.

Clipboard11  

 

Нажимаем на здание. Точка добавлена, теперь нужно ее назвать и добавить описание. Нажимаем «Сохранить».

Clipboard12  

 

Точка содержит координаты. Они могут пригодиться клиентам, которые используют GPS навигатор. Стоит добавить фотографии, например, фасад здания и вход в ваш офис, так клиентам будет проще вас найти. Фото добавляем через значок фотоаппарата.

Clipboard13  

 

Цвет метки можно изменить, для этого нажимаем на инструмент заливки. Изначально она синего цвета, можно выбрать более яркий, например, красный или зеленый, чтобы ваша метка отличалась от окружающих. В этом же разделе можно поменять значок со стандартного значка геолокации на другой. Пусть значок отражает вашу деятельность — если это кафе, выберите значок со столовыми приборами, если хостел — значок кровати.

Clipboard14  

 

Значки наглядно показывают, что находится в здании — где можно покушать, где переночевать, где совершить покупки. До созданной точки можно построить маршрут. Например, от метро. Делается через значок косой стрелки.

Точку можно отредактировать или удалить — значки карандаша и корзины.

Clipboard15  

 

Чтобы открыть меню карты, жмем на 3 точки рядом с названием. Можно удалить карту, задать область просмотра по умолчанию, добавить на сайт, экспортировать и распечатать.

Clipboard16  

 

Также можно настроить совместный доступ и сделать карту видимой для всех, все это делается через кнопку «Поделиться». Особой необходимости в совместном доступе нет, достаточно создать карту один раз и добавить на сайт, но сама функция присутствует. Она нужна для более сложных проектов, например, для тех, кто разрабатывает маршрут для экскурсий.

Clipboard17  

 

Для простого добавления карты на сайт нужно один раз сделать ее видимой для всех с помощью вышеупомянутой функции «Поделиться». Созданную карту также можно будет добавить через html-код.

 

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

1. Через код (HTML)

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

Показываем на примере конструктора Wix.

Нажимаем на добавление элементов (+), затем «Вставка» — «Вставка кода» — HTML iframe.

Clipboard18  

 

На странице появляется блок, добавляем в него код и нажимаем кнопку «Применить» .

Clipboard19  

 

Получается вот такая карта на странице.

Clipboard20  

 

Карту обычно добавляют в нижнюю часть страницы или в футер сайта. Для футера выбирайте маленький размер карты.

 

2. С помощью плагина (для WordPress и других CMS)

Если ваш сайт создан на CMS, и вы не умеете работать с кодом, проще установить плагин. Для WordPress создано несколько плагинов карт, но чаще всего используют WP Google Maps — у него более 400 000 активных скачиваний.

В админке сайта заходим в плагины — добавить новый.

Clipboard21  

 

Пишем WP Google Maps или просто Google Maps, если хотите посмотреть, какие еще плагины есть.

Clipboard22  

 

Нажимаем «Установить» и «Активировать».

В этом плагине нужно создавать карту с нуля. Нажимаем «Создать карту» или «Create map» и создается первая карта, которой сразу присваивается шорткод — его потом нужно будет добавить в нужную часть страницы. Нажимаем «Редактировать» или «Edit».

Clipboard23  

 

Плагин предлагает 2 инструмента для создания карт, один не использует Api key, второй (Google Maps) использует.

Clipboard24  

 

В разделе Markers указываем адрес точки, можно добавить анимацию. Справа нужно масштабировать карту до нужного размера, например, увеличить до конкретных улиц. Сохраняем точку «Save Marker» и указываем Api Key (справа окно, где написано Please ensure you enter a Google Maps API key to continue using Google Maps), нужно нажать на ссылку.

Clipboard25  

 

Ключ вставляется в соответствующее окно.

Clipboard26  

 

Для его получения нужно зарегистрироваться на сайте https://cloud.google.com/maps-platform/. Использование ключа платное — от 2 $ в месяц и выше. Есть бесплатный тариф, но с ограничениями. Если не хочется возиться с ключом — тогда выбирайте плагин, где не нужен API key или добавляйте через html-код, про который мы писали выше. Также на Google Maps Platform есть функции для кастомизации Google Карт.

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

Clipboard27  

 

Чтобы карта начала отображаться на странице, в нужную часть вставляем шорткод и сохраняем страницу.

Clipboard28  

 

Заключение

Google Карта на сайте, помогает клиентам понять, где вы находитесь. Ее актуально использовать владельцам оффлайн бизнеса — торговых точек, кафе, офисов. Можно взять готовую карту и добавить ее на сайт или создать свою с нуля. На сайт карта добавляется при помощи html-кода или плагина. В некоторых случаях может понадобиться API key.

По материалам сайта postium.ru

 

просмотров 122
Другие статьи в рубрике "Работы по Сайту"
Реклама на сайте:
Реклама на сайте:
0.04