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

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

В этом уроке мы поговорим о том, когда этот тип карты пригодится. Кроме того, мы покажем вам, как добавить их в WordPress двумя способами.

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

Тогда мдавай приступим к работе!

Что такое интерактивная карта (и когда ее использовать?)

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

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

С другой стороны, интерактивные карты позволяют вам (а в некоторых случаях и вашим коллегам) добавлять новые маркеры, значки, текст и многое другое. Представьте, например, что вы планируете встречу для участников вашего веб-сайта. Вы можете настроить карту с несколькими метками, чтобы предлагать местоположения.

Откройте для себя, кстати 5 WordPress плагины для добавления геолокации в ваш блог

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

Кроме того, их не обязательно сложнее добавлять, чем их аналогов.

Как добавить интерактивные карты на сайт WordPress

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

1. Используйте плагин Карты Marker Pro

Используйте Map Maker Pro

Плагин Карты Marker Pro это универсальное решение премиум-класса для добавления карт в WordPress. Он предлагает десятки расширенных функций, таких как те, которые позволяют просматривать карты из нескольких отделов, а также добавлять практически неограниченное количество маркеров на свои карты и организовывать их. Кроме того, посетители могут фильтровать типы маркеров, которые они хотят видеть на ваших картах.

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

Однако это не так сложно, как вы думаете. 

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

Когда плагин будет готов, вам нужно добавить новую карту или слой, что вы можете сделать на вкладке Maps Marker Pro> Добавить новый слой. Здесь установите имя, которое вы можете узнать для своего слоя, и введите местоположение, которое вы хотите, чтобы он отображался, как и в любом другом онлайн-инструменте картографирования:

Добавить новый слой

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

Отобразить маркер

опция Маркеры поискаС другой стороны, это довольно явно. Это может быть полезно, если вы хотите добавить дополнительную информацию о ваших маркерах:

Список маркеров

Теперь прокрутите вниз и найдите вариант « Добавить новый маркер на этот слой« . На следующем экране вы сможете определить имя и местоположение для вашего маркера, используя ту же карту, что и предыдущая.

Откройте для себя тоже Как сжать и изменить размер изображения на WordPress

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

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

Пример слоя на блоке

Когда вы будете готовы добавить новую интерактивную карту на одну из своих страниц, вы должны использовать короткий код. Прокрутите вкладку до верха Редактировать слой  и найдите его соответствующий идентификатор:

Сохранить идентификаторы карт

Теперь поместите короткий код [mapsmarker layer = "X"] в вашем сообщении или на странице. Не забудьте заменить заполнитель  однако заранее по идентификатору вашего "слоя".

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

2. Использование встроенной функции встраивания Google Map

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

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

Дело в том, что Google Maps предлагает гораздо больше возможностей, чем простое картирование. Например, вы также можете добавить несколько маркеров, измерить расстояния и включить направления в свои карты. Чтобы попробовать эти функции, перейдите на Google My Maps и нажмите на кнопку  + Создать новую карту  :

Создать карту на карте Google

На следующем экране установите название для вашей карты и ее первого слоя, на котором мы будем основываться. Теперь найдите местоположение, которым хотите поделиться, с помощью панели поиска Google Map в верхней части экрана:

Новая карта и местоположение на карте Google

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

Добавьте маркер на вашу новую карту.

Если у вас есть несколько маркеров, вы можете нарисовать линии между ними, чтобы отобразить расстояния:

Отображение расстояния между двумя точками на карте

Когда ваша карта будет готова, нажмите на кнопку доля в меню слева. Там меняем настройки доступа  de частный  à что такое варган? :

Определить доступ к карте

Вы также можете пригласить членов команды использовать свою электронную почту, чтобы они сразу получили доступ к карте:

Карта для сотрудничества с партнерами

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

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

Откройте для себя также несколько премиальных плагинов WordPress  

Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Ultimate Math Captcha

Ultimate Math Captcha — это Плагин Wordpress 100% эффективная капча премиум. Позволяет добавить математическую капчу на формы Вход в WordPress, регистрация, восстановление пароля, комментарии, WooCommerce, Easy Digital Downloads и вспомогательные формы от bbPress.com.Плагин Ultimate Math Captcha для wordpress

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

скачать | Демонстрациявеб-хостинг

2. Стандартный платежный шлюз PayPal для форм Ninja

Стандартный шлюз PayPal для форм Ninja позволяет создавать формы, которые легко интегрируются с платежным шлюзом PayPal. Вы сможете создавать персонализированные формы заказов и получать платежи, используя стандартные счета Paypal.

Стандартный платежный шлюз Paypal для форм ниндзя

Его основные особенности: простая и быстрая интеграция, интеграция IPN, возможность активировать / деактивировать шлюз PayPal в отдельных формах, поддержка регулярных платежей и т. Д.

скачать | Демонстрация |  веб-хостинг

3. Gravity Forms - список и редактирование

с этим Плагин Wordpress premium можно изменять или удалять записи, представленные в формах вашего сайта. Функция, которой очень не хватает в плагине Gravity Forms, поэтому было создано это расширение.Список форм гравитации редактировать плагины wordpress вставлять таблицы графика сайт блог форма

Среди его особенностей отметим среди прочего: мредактирование и сохранение записанных данных,угнетение введенных данных,изменение и удаление уже опубликованных статей, iИдеальная интеграция с плагинами jQuery Datatables и Гравитационные ФормыПоддержка условной логики, сосуществить и быстро установить, и многое другое.

скачать Демонстрация | веб-хостинг

Рекомендуемые ресурсы

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

Заключение

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

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов по созданию интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.

...