Размещайте подробные карты Google с помощью плагина WordPress Map Locations

Опубликовано: 2023-03-30

Знаете ли вы, что вы можете разместить интерактивную карту Google на своем веб-сайте WordPress?

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

Если вы хотите вывести расположение карт Google на новый уровень на своем сайте WordPress, оставайтесь, потому что в этой статье я покажу вам, как именно это сделать.

Но сначала, какие потенциальные возможности вы могли бы использовать для размещения карты Google на своем сайте?

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

Вы можете сделать все это с помощью плагина WordPress Map Locations от Creative Minds. Давайте начнем!

Создавайте уникальные карты с помощью плагина Map Locations

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

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

скриншот страницы WordPress плагина Cm Map Locations

Кроме того, плагин поддерживает:

  • Импорт и экспорт местоположений
  • Поиск местоположения по почтовому индексу
  • Встраивание местоположений с помощью шорткодов
Ознакомьтесь с локациями на карте

Начало работы с плагином WordPress Map Locations

Плагин Map Locations имеет полное меню настроек и содержит легкодоступное руководство пользователя прямо на панели администратора WordPress. Существует несколько важных шагов для настройки и настройки ваших карт. Первый — установка плагина на ваш сайт.

Установите плагин Map Locations

Вы можете найти и загрузить плагин Map Locations на его странице WordPress.org. Кроме того, вы можете выполнить поиск «местоположений cm map» на панели инструментов в разделе «Плагины» → «Добавить новый» .

Вы также можете приобрести одну из премиальных версий плагина на сайте Creative Minds.

После установки и активации вы найдете новый пункт меню в левом меню панели инструментов под названием «Местоположения CM Map».

Первым шагом в настройке плагина является ввод ключа Google Maps API. Если у вас его еще нет, давайте рассмотрим это сейчас.

Получите ключ API Google Карт

Во-первых, вам понадобится учетная запись Google. С июля 2018 года для использования данных Google Maps, Routes и Places также требуется наличие платежной информации в Google Cloud. Однако у вас будет возможность добавить эту информацию при создании ключа API.

В разделе CM Map Locations→Settings вы найдете поле для ключа API и ссылку для его получения, если у вас его еще нет.

снимок экрана с меню «Места на карте»

Вам понадобится несколько ключей API для использования плагина Map Locations:

  • JavaScript API
  • API геолокации (для некоторых функций; требуется HTTPS)
  • API геокодирования
  • API мест

Чтобы получить эти ключи, перейдите на страницу разработчиков Google.

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

скриншот меню проекта Google Developer

Затем перейдите в раздел «API и сервисы» → «Библиотека» .

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

После того, как у вас включены все API, вам нужно получить ключ (вам нужен только один). На боковой панели выберите Учетные данные, где вы увидите свой ключ API. Скопируйте ключ API в буфер обмена — через мгновение вы вставите его на свой веб-сайт.

Во-первых, вам нужно включить выставление счетов за Google Cloud, как я упоминал ранее. Это важный шаг для правильной работы плагина Maps Location. Войдя в свой проект, щелкните меню-гамбургер в левом верхнем углу и выберите «Оплата». Вы получите сообщение с предложением привязать платежный аккаунт . Нажмите эту кнопку и следуйте инструкциям.

Теперь, когда вы выполнили все шаги по настройке и получению ключей Google API, вернитесь на свой сайт WordPress. На странице настроек CM Map Locations вставьте свой ключ API Карт Google и нажмите Сохранить внизу. При желании вы можете протестировать конфигурацию с помощью кнопки справа.

Добавление местоположения

Плагин Map Locations создает индексную страницу как для посетителей, так и для пользователей. Как только вы добавите местоположение, оно будет указано на этих страницах. Прежде чем добавлять местоположение, рекомендуется создать хотя бы одну категорию для своих карт.

Это так же просто, как добавить новую категорию сообщений, но они относятся к местоположениям на карте. Создайте столько категорий, сколько хотите, в CM Map Locations→Categories . Вы также можете добавить значки маркеров по умолчанию для каждой категории.

снимок экрана с меню «Места на карте»

После того, как вы создали свои категории, вы можете добавить местоположение. Вы можете использовать меню CM Map Locations или нажать + New на панели инструментов администратора и выбрать Location . В новом редакторе страницы местоположения заполните поля «Имя местоположения» и «Описание», относящиеся к нужному местоположению.

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

Затем прокрутите вниз до карты Google, отображаемой на странице. Найдите местоположение или переместите карту по мере необходимости. Когда вы увидите свое местоположение, выберите один из инструментов рисования и нарисуйте границы своего местоположения на карте.

снимок экрана создания местоположения карты на карте Google

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

  • Номер телефона
  • Веб-сайт
  • Адрес электронной почты
  • URL-адрес

Нажмите кнопку «Сохранить» , и ваше местоположение будет добавлено в список местоположений, доступных на вашем сайте. При просмотре местоположения ваши посетители увидят аккуратно отформатированную информацию и карту.

скриншот отображаемой карты Санта-Барбары

Создание индексной страницы

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

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

  • Заголовок
  • Описание
  • Адрес
  • Рейтинг.

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

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

Отображение карт с использованием шорткодов

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

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

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

Ниже приведен список всех шорткодов и их параметров, а также примеры для облегчения понимания:

Коды местоположения:

  1. Фрагмент
    • Шорткод: [cmloc-фрагмент]
    • Использование: Отображает фрагмент местоположения.
    • Параметры фильтрации: id
    • Параметры просмотра: рекомендуемые
    • Образец: [cmloc-snippet id="487″ Featured="map"]
  2. Карта конкретного местоположения
    • Шорткод: [cmloc-location-map]
    • Использование: Показывает определенное место на карте.
    • Параметры фильтрации: id
    • Параметры просмотра: тема, высота карты, ширина карты, ширина, заголовок, дата показа.
    • Пример: [cmloc-location-map id=1767 mapwidth=640 mapheight=480 width=700 showtitle=1 showdate=1]
  3. Карта нескольких мест
    • Шорткод: [cmloc-locations-map]
    • Использование: отображение карт с местоположениями из выбранной категории.
    • Параметры фильтрации: showonlybyparams, limit, page, category, taxonomy_key
    • Параметры просмотра: тема, список, ширина карты, ширина, меню, всплывающая подсказка, карта, отслеживание пользователей, from_date, to_date
    • Получить параметры: bgcolor, bgcolor_filter, время, time_filter, идентификатор, идентификатор_фильтр, from_date, to_date, часы, путь
    • Пример 1: [cmloc-locations-map category="mountains"]
    • Пример 2: [cmloc-locations-map list=left limit=4 page=1 category="111"]
  4. Карта текущих местоположений
    • Шорткод: [cmloc-current-locations-map]
    • Использование: Показывает карты текущих местоположений.
    • Параметры фильтрации: лимит, страница
    • Параметры просмотра: тема, ширина карты, ширина, всплывающая подсказка
    • Образец: [cmloc-current-locations-map]

Шорткоды можно найти в разделе «Шорткоды» для справки.

Доступные шорткоды

Вы можете найти подробные инструкции по настройке шорткодов и отображению местоположений с помощью шорткодов в справочных документах базы знаний CM Map Locations.

Контроль доступа

Если вы хотите сделать свои карты интерактивными, вам необходимо настроить контроль доступа в меню CM Map Locations . Есть несколько вариантов доступа.

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

Администратор может выбирать из предустановленных параметров, таких как все, вошедшие пользователи или определенные роли пользователей, такие как администратор, редактор, автор, участник или подписчик.

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

Список местоположений

Это позволяет вам указать, кто может получить доступ к индексу местоположений, а также искать или фильтровать местоположения.

Посмотреть местоположение

Это определяет, кто может отображать страницу местоположения.

Создать местоположение

Выберите, кто может создавать местоположения.

Обновить собственное местоположение

Выберите, кто может обновлять местоположения.

Роли, которым разрешено использовать медиатеку

Если у подписчика есть возможность upload_files, он может видеть вкладку Медиатека WordPress при загрузке изображения для местоположения. Если вы хотите, чтобы пользователи не могли выполнять поиск в медиатеке вашего веб-сайта, убедитесь, что вы отозвали доступ для определенных ролей.

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

Дополнительные возможности

Я рассмотрел основы настройки и использования плагина Map Locations, но доступно гораздо больше функций.

Темы

На выбор предлагается до шести тем, чтобы ваши местоположения выделялись на вашем сайте.

Плитки/слои

Тайл или слой — это часть карты, которая создается и отображается отдельно от остальной части карты.

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

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

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

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

Пример наложения тайлов на карты
Пример наложения тайлов на карты

Настройки находятся на вкладке «Общие» в разделе «Карта».

  • Представление карты по умолчанию — выберите представление по умолчанию. Пользователи могут изменить это в любое время.
  • Вставить URL-адрес плитки — добавьте URL-адрес службы плитки по вашему выбору. Проверьте Плитки — OpenStreetMap Wiki для получения дополнительных примеров
Настройка тайлов и слоев на картах
Настройка тайлов и слоев на картах

Разрешить посетителям включать и выключать плитки во время просмотра карты.

Нажмите кнопку «Плитки», чтобы отобразить или скрыть плитки.
Нажмите кнопку «Плитки», чтобы отобразить или скрыть плитки.

Вы даже можете разрешить пользователям загружать плитки.

Показать местоположение пользователя

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

Поддержка REST/API

Используйте REST API для создания местоположений с других сайтов или даже мобильных приложений.

Шаблоны отображения

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

Поиск по радиусу

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

Waze и Google Directions

Когда вы создаете новое местоположение, в список автоматически добавляются ссылки направлений Wave и Google.

Цены на плагин Map Locations

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

Местоположение карты Essential (Pro) = 39 долларов США в год

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

Расширенное местоположение на карте + пакет Route Manager = 69 долларов США в год.

Этот уровень добавляет подключаемый модуль Creative Minds Route Manager и расширяет лицензию до трех веб-сайтов.

Ultimate Map Location + Map Routes + 5 дополнений = 119 долларов в год

Уровень Ultimate добавляет несколько надстроек и плагин Map Routes с лицензией для десяти веб-сайтов.

Каждый уровень обеспечивает один год поддержки и предлагает 30-дневную гарантию возврата денег.

Отображение интерактивных карт на вашем сайте WordPress

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

Попробуйте плагин Map Locations