Как добавить интерактивные карты на ваш сайт WordPress
Приветствую вас, посетители и подписчики моего блога!
Сегодня я бы хотел рассказать вам как добавить интерактивные карты на ваш сайт или блог WordPress.
Я расскажу вам о двух способах внедрения интерактивных карт на ваш сайт.
Следует признать, что онлайн-карты довольно просты. Если вы используете такой сервис, как Google Maps, вы просто выбираете местоположение и вставляете карту на свой веб-сайт. Тем не менее, вы не можете редактировать обычные карты на лету, равно как и ваши коллеги, что часто необходимо для совместных проектов.
Вот где приходят на помощь интерактивные карты. Они позволяют вам размещать подвижные маркеры, которые каждый может редактировать в вашей команде. В этой статье мы поговорим о том, когда этот тип карт пригодится. Кроме того, я научу вас двум способам добавления их в WordPress.
Давай приступим к работе!
Что такое интерактивные карты (и когда их использовать)
Добавить карту на сайт достаточно просто. Такие инструменты, как Google Maps позволяют встраивать карты в страницы за считанные минуты. Преимущество этого подхода заключается в том, что посетители могут перемещаться по картам, увеличивать, уменьшать масштаб и многое другое. Эти типы карт более интерактивны, чем простые изображения, но они не позволяют вносить изменения после их добавления на веб-сайт.
Интерактивные карты, с другой стороны, позволяют вам (и в некоторых случаях вашим коллегам) добавлять к ним новые маркеры, значки, текст и многое другое. Представьте, например, что вы планируете встречу для участников вашего сайта. Вы можете настроить карту с несколькими маркерами, чтобы предложить местоположение.
Вы также можете использовать интерактивную карту для своих пользователей, чтобы поделиться своим местоположением или указать друг другу места, которые они могут захотеть посетить. Если честно, это довольно нишевые приложения. Тем не менее, интерактивные карты могут пригодиться в самых разных ситуациях. Кроме того, их не так сложно добавить, как их обычный аналог.
Как добавить интерактивные карты на свой веб-сайт WordPress
Когда дело доходит до интерактивных карт, вы можете либо вставить их на свой сайт, либо использовать плагин, чтобы помочь вам сделать это. Первый подход проще, а также плагины часто содержат гораздо больше функций, как и следовало ожидать. Давайте сначала рассмотрим плагинный подход, чтобы продемонстрировать, что это за функции.
1. Используйте плагин Maps Marker Pro
Плагин Maps Marker Pro — это универсальное премиум-решение для встраивания карт в WordPress. Он включает в себя десятки дополнительных функций, таких как возможность извлекать карты из нескольких сервисов, добавлять практически неограниченное количество маркеров на карты и классифицировать их. Кроме того, посетители могут фильтровать типы маркеров, которые они хотят видеть на ваших картах.
Другие забавные вещи, которые вы можете сделать с помощью плагина, включают добавление расстояния и информации о маршруте между маркерами. Вы даже можете поделиться своим собственным местоположением в режиме реального времени через карту вашего сайта, если вы склонны сделать это. Настройка плагина может занять некоторое время, учитывая множество функций, которые он предлагает. Однако это не так сложно, как вы можете себе представить.
Для начала настройте и активируйте плагин, как и любой другой. Когда плагин будет готов к работе, вам нужно будет добавить новую карту или «слой», что вы можете сделать из «Maps Marker Pro — Add new layer». Здесь задайте имя, которое вы можете распознать для вашего слоя, и введите местоположение, которое вы хотите, чтобы оно отображалось, так же, как и с любым другим инструментом онлайн-карты:
Теперь вы можете точно настроить размер и уровень масштабирования, которые вы хотите установить по умолчанию, используя левое меню. Есть также опция, называемая «Marker clustering», которая будет отображать значок с количеством маркеров в области, если вы слишком сильно уменьшите изображение, как в примере ниже:
С другой стороны, параметр «Show list of markers below map» («Показать список маркеров под картой») довольно очевиден. Это может пригодиться, если вы хотите добавить дополнительную информацию для ваших маркеров:
Теперь прокрутите вниз и найдите опцию, которая называется «Add new marker to this layer» («Добавить новый маркер к этому слою»). На следующем экране вы сможете установить имя и местоположение для вашего маркера, используя ту же карту, что и на предыдущем.
Вы также можете выбрать значок и установить всплывающий текст для маркера. Это будет отображаться при нажатии на сам маркер или выберите его из списка если вы решили включить его. В любом случае, не забудьте нажать кнопку «Publish» («Опубликовать»), когда вы закончите. После добавления нескольких маркеров исходный слой должен выглядеть примерно так:
Когда вы будете готовы добавить новую интерактивную карту на одну из своих страниц, вам нужно будет использовать шорткод. Вернитесь к верхней части вкладки «Edit layer» («Редактировать слой») и найдите соответствующий идентификатор:
Теперь поместите шорткод [mapsmarker layer=»X»] в нужный пост или страницу. Не забудьте заменить «заполнитель X» идентификатором вашей интерактивной карты.
Теперь ваша карта должна быть запущена на вашем сайте! Что еще более важно, вы или кто-либо еще в вашей команде может редактировать ее и добавлять новые маркеры в любое время, не выходя из панели мониторинга.
2. Благодаря встроенной функции Google Map Embed
Google Maps вряд ли нуждается в представлении — это сервис, который позволяет вам извлекать карты со всего мира, чтобы вы могли делиться местоположениями с другими людьми, находить адреса и даже делиться информацией о том, где вы находитесь. Когда дело доходит до веб-сайтов, вы можете встраивать «Карты Google» в свои страницы множеством способов. Тем не менее, большинство карт предлагают ограниченное количество интерактивности. Они позволяют вам перемещаться по ним, увеличивать, уменьшать масштаб и переключать вид, но не намного.
Дело в том, что Google Maps предлагает гораздо больше возможностей, чем просто картографирование. Например, вы также можете добавить несколько маркеров, измерить расстояния и включить маршруты в свои карты, аналогично «Maps Marker Pro». Чтобы опробовать эти функции, перейдите в Google My Maps и нажмите кнопку «Create a New» («Создать новую карту»):
На следующем экране установите заголовок вашей карты и ее первый слой, который мы и будем строить. Теперь найдите местоположение, которым вы хотите поделиться, используя панель поиска Google Map в верхней части экрана:
Когда вы увеличите масштаб, вы можете использовать символ маркера в верхней части экрана, чтобы начать выделять места на вашей карте. Просто щелкните там, где вы хотите разместить свой маркер, затем установите имя и значок для него:
Если у вас есть несколько маркеров, вы можете чертить линии между ними, показывая расстояния:
Когда карта будет готова, нажмите кнопку «Share» («Поделиться») в меню слева. Там можно изменить настройки в разделе «Who has access» («Кто имеет доступ») от «Private» («Частного») к «Public» («Общему»):
Вы также можете пригласить отдельных членов команды, используя их электронную почту, чтобы они получили немедленный доступ к редактированию карты:
В любом случае, вам все равно придется вставить новую карту на ваш сайт. Вы можете сделать это, щелкнув по значку в три точки рядом с названием вашей карты и выбрав опцию «Embed on my site» («Вставить на мой сайт»):
Теперь вы можете скопировать и вставить код встраивания на любую из ваших страниц, например — на страницу «Контакты». Ваша новая карта будет отображаться там, где вы ее разместите. Кроме того, ваши товарищи по команде смогут редактировать ее и добавлять новые маркеры через Google Maps по мере необходимости.
Для пользователей темы Divi
Если у вас на сайте не стоит тема «Divi» и вы не подписчик Elegant Themes — можете пропустить этот способ!
Если все, что вам нужно, это простая карта и несколько маркеров, вы также можете использовать модуль Divi’s Map, чтобы добавить его на свой веб-сайт. Давайте поговорим о том, как это сделать.
Как добавить карту на ваш сайт WordPress с помощью модуля Divi Map
Прежде чем приступить к работе, вам необходимо создать ключ API Google, который необходим Divi для работы с картой, используемой его модулем. Получите ключ API, и как только он у вас появится, откройте «Divi Builder» на нужной странице. Далее добавьте модуль Map и откройте его настройки. Вы увидите кнопку с надписью «ADD YOUR API KEY» в верхней части экрана:
Нажав на эту кнопку, вы попадете на страницу настроек «Divi», где вы можете добавить свой ключ API Google:
Сохраните ваш ключ и вернитесь к «Divi Builder». Если вы снова откроете окно настроек модуля карты, вы увидите, что теперь вы можете выбрать адрес центра карты, в котором будет отображаться ваша карта:
Найдите адрес, который вы хотите отобразить, и прокрутите назад туда, где написано «Add New Pin». Нажав на эту кнопку, вы сможете установить заголовок, описание и расположение первого маркера вашей карты:
Имейте в виду — модуль карты Divi позволяет добавлять несколько контактов. Это делает его допустимым, если вы хотите выделить несколько адресов. Кроме того, вы можете настроить стиль вашего маркера, зайдя в настройки дизайна и поигравшись с параметрами. Вот пример готовой карты, созданной с помощью модуля «Divi Map»:
Несмотря на то, что Google Maps и Maps Marker Pro предлагают больше настроек, Divi прекрасно подходит для удобства использования. Более того, вам не нужно использовать шорткоды или вставлять коды для размещения ваших карт. В конце концов, построитель дает вам полный контроль над тем, куда они должны идти.
В заключении
Добавить карты на ваш сайт WordPress очень просто, особенно если вы используете Divi, благодаря его модулю «Divi Map». Однако регулярные карты полезны только в том случае, если вы хотите продемонстрировать один адрес. Если вам нужно больше гибкости, лучше всего использовать интерактивные карты.
С WordPress у вас есть два способа добавить интерактивные карты на ваш сайт. Давайте вспомним их:
- Использование плагина Maps Marker Pro.
- С помощью встроенной функции Google Map.
У вас есть вопросы о том, когда использовать интерактивные карты на вашем веб-сайте WordPress? Давайте поговорим о них в разделе комментариев ниже!
На этом все — до скорых встреч!