Google Maps: как добавить на сайт

Google Maps как добавить его на сайт в теории
Метки:

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

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

Как сделать новую карту Google:

Чтобы сформировать собственную карту, пользователю необходимо:

  • На официальном сайте Google Maps щелкнуть кнопку с тремя горизонтальными полосами.
  • Выбрав в левом меню раздел «Мои места», нажать кнопку «Карты» из горизонтальной панели.
  • Нажать кнопку «Создать карту», которая находится в самой нижней области раздела «Карты».
  • Сделать нажатие строки «Карта без названия», чтобы добавить месту имя и понятное описание.
  • Изменить масштаб карты до города, после чего отыскать улицу и дом с офисным помещением.
  • Щелкнуть иконку геолокации в меню под строкой поиска, чтобы отметить интересующее здание.
  • Добавить маркер кликом по зданию, ввести название, вставить описание и сохранить изменения.

Как настроить маркер

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

  • Заливка изменяет оттенок метки. По умолчанию ей присвоен синий цвет, но пользователь может указать красный, желтый и другой яркий тон. В том же разделе существует инструмент для замены стандартной иконки геолокации на другую, чтобы наглядно показать сферу бизнеса. Например, для кафе пригодится значок столовых приборов, для магазинов — сумки, для гостиницы — кровати и так далее. Правильно подобранные иконки покажут, что существует в доме — где можно пообедать, где переночевать, где купить продукты.
  • Карандаш предназначен для изменения наименования и описания в карточке маркера, который уже присутствует на карте населенного пункта.
  • Фотоаппарат позволяет добавить снимки фасада дома, входа в офис и прилегающей территории. Это позволит клиентам убедиться в существовании фирмы и быстрее отыскать здание.
  • Косая стрелка предлагает построить путь, к примеру, от автобусной остановки до сделанной на картах метки.

Что предлагает сделать меню карты

Чтобы зайти в левое меню карты, необходимо щелкнуть вертикальное многоточие возле названия. Предлагаемые картографическим сервисом команды позволяют подобрать первоначальный размер участка просмотра, вставить на веб-ресурс, отправить на принтер, осуществить экспорт. Кроме того, сервис позволяет сконфигурировать общий доступ и включить видимость карты для всех людей. Если нажать кнопку «Добавить на сайт», всплывет окно с кодом карты в теге iframe для вставки на веб-страницу.

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

Итак, маркер создан, расположен в необходимых координатах и оформлен. Теперь наступила очередь добавления карты на страницу интернет-ресурса. Это можно сделать двумя методами.

Через код HTML

Как известно, сервис Google Maps разрешает вставлять карты на сайт посредством html-кода. Этот способ пригодится, если веб-ресурс сформирован в WYSIWYG конструкторе, например, Wix. Тогда вебмастеру нужно:

  • Нажать значок плюса, запускающий функцию добавления нового элемента на страницу.
  • Выбрать раздел «Вставка», открыть подраздел «Вставка кода», щелкнуть пункт HTML iframe.
  • В настройках добавленного блока вставить HTML код и нажать кнопку сохранения изменений.

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

Через плагин для CMS

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

  • Открыть панель администратора для управления работой движка.
  • Зайдя в пункт управления плагинами, нажать кнопку «Добавить новый».
  • В поиске набрать запрос WP Google Maps, чтобы обнаружить этот плагин.
  • Если он появился на странице результатов, щелкнуть кнопку «Установить».
  • Когда процесс инсталляции закончится, нажать кнопку «Активировать».

В этом подключаемом модуле карта создается с самого начала, для чего нужно:

  • Нажать кнопку Create map, отвечающую за создание первой карты и генерация короткого кода — он позже добавляется на подходящий участок страницы.
  • Щелкнуть Edit, чтобы плагин предложил выбрать один из двух инструментов. Первый пользуется Api key (Google Maps), а второй не пользуется этим ключом (Open Layer).
  • Выбрав «Карты Google», в пункте Markers написать адрес метки. В правой части окна необходимо увеличить масштаб до конкретного дома.
  • Сохранив изменения кнопкой Save Marker, написать Api Key. Это делается в поле напротив строки Please ensure you enter a Google Maps API key to continue using Google Maps.

Чтобы сгенерировать упомянутый ключ, придется пройти несложную регистрацию на веб-портале https://cloud.google.com/maps-platform/. При этом рекомендуется знать, что стоимость эксплуатации ключа начинается от двух долларов в месяц, а в бесплатном тарифе существуют ограничения. Если жалко отдавать деньги за ключ, можно установить плагин без API key или добавить страницу через код html. Итак, при создании аккаунта пользователь должен заполнить предлагаемые сервисом формы, оплатить тарифный план, получить сгенерированный ключ и вставить его строку в поле плагина.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Также рекомендую:

Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии