Хотите создать карту с несколькими местоположениями в WordPress с помощью Elementor и необходимые дополнения?
Предположим, у вас есть бизнес, у которого уже есть несколько филиалов в городе, и вы хотите создать цифровую карту, показывающую расположение этих филиалов. Если у вас есть веб-сайт на основе WordPress, вы можете легко создать такую карту. Есть отличный плагин, который вы можете использовать для создания карты с несколькими местоположениями: Основные дополнения.
Основные дополнения является дополнением Elementor премиум, поэтому вам также необходимо установить Elementor прежде чем вы сможете его использовать. Вы можете использовать бесплатную версию Elementor для создания карты с модулем Essential Addons.
La бесплатная версия Essential Addons также доступен. Однако виджет для создания карты доступен только в платной версии. Вы можете скачать платную версию Essential Addons на его Официальный сайт.
Мы будем использовать платформу Google Maps для создания карты на вашем WordPress с помощью Essential Addons. Прежде чем начать, обязательно установите Elementor и Essential Addons.
Интегрируйте Карты Google с модулем Essential Addons
Прежде чем вы сможете добавить карту Google Maps с помощью Essential Addons, вы должны сначала интегрировать их. Вам нужен ключ API для интеграции Карт Google с модулями Essential Addons.
Во-первых, посетите Консоль API Google и войдите в свою учетную запись Google. Создайте новый проект, щелкнув раскрывающееся меню вверху и нажав НОВЫЙ ПРОЕКТ.
Дайте вашему новому проекту имя и нажмите кнопку СОЗДАТЬ .
Как только ваш новый проект будет создан, выберите его в раскрывающемся меню и нажмите библиотека на левой панели.
Google делит API платформы Google Maps на 17 типов. Вы можете увидеть их, перейдя по ссылке ПОКАЗАТЬ ВСЕ в разделе Cartes. Вам нужно включить API в зависимости от того, чего вы хотите достичь.
Узнайте также: Как создать собственный шаблон отдельного продукта в WooCommerce с помощью Elementor
В нашем случае вам нужно включить следующие API, чтобы добавить карту из Google Maps с помощью Essential Addons.
- API маршрутов
- API геокодирования
- Карты JavaScript API
- API мест
Чтобы активировать API, выберите API, который вы хотите активировать (нажав на него), и нажмите на кнопку АКТИВИРОВАТЬ.
Завершив включение необходимых API, вернитесь на главную панель инструментов Google API Console и нажмите Идентификаторы на левой панели. Нажмите на кнопку Создать учетные данные и выберите Ключ API. Скопируйте ключ API в появившемся всплывающем окне.
Войдите в свою панель управления WordPress и нажмите Основные дополнения на левой панели. Нажмите на вкладку Elements и прокрутите вниз в разделе Расширенная карта Google, Cliquez sur Настройки и вставьте ключ API, который вы только что скопировали.
Нажмите на кнопку СОХРАНИТЬ НАСТРОЙКИ чтобы применить новое изменение.
Начать создание карты
После интеграции Google Maps и Essential Addons вы можете приступить к созданию карты. Для этого создайте новую страницу (Страницы –> Добавить ) или новую статью (Предметы – > Добавить) и отредактируйте его с помощью Elementor.
Перед созданием страницы установите макет, щелкнув значок шестеренки в левом нижнем углу, чтобы открыть панель настроек. Установите макет из выпадающего меню.
Создайте новый раздел, нажав кнопку «плюс» в поле редактирования. Чтобы иметь более широкую область карты, вы можете выбрать структуру с одним столбцом. Перетащите виджет Google Карты ЕА с левой панели в область редактирования.
Перейдите на левую панель и установите тип карты на множественный маркер.
Откройте раздел Настройки маркеров карты и нажмите на существующий маркер карты, чтобы отредактировать его. Вставьте широту и долготу первого местоположения, которое вы хотите добавить на карту. Также установите заголовок, а также описание.
Чтобы получить широту и долготу местоположения, откройте Карты Google и найдите местоположение (место), широту и долготу которого вы хотите получить. Найдя, щелкните правой кнопкой мыши и щелкните левой кнопкой мыши по номеру, который появляется в контекстном меню.
Таким образом, это действие позволяет скопировать широту (первое значение) и долготу (второе значение).
Когда закончите добавлять широту и долготу первого местоположения, нажмите кнопку ДОБАВИТЬ ЭЛЕМЕНТ чтобы добавить другое местоположение на карту.
Снова откройте Карты Google и найдите новое местоположение, которое вы хотите добавить на карту, скопируйте долготу, а также долготу и вставьте их в соответствующие поля, как показано выше. Повторите описанные выше шаги, чтобы добавить на карту другие местоположения.
Читайте также: Как использовать виджет сообщений Elementor
Когда закончите добавлять локации, откройте блок Управление картой чтобы включить / отключить команды, которые вы хотите предоставить на своей карте. Вы также можете установить уровень масштабирования здесь.
Вы также можете открыть блок Тема карты чтобы выбрать тему Google Maps, которую вы хотите использовать.
До сих пор вы успешно создали карту с несколькими местоположениями. Вы можете открыть вкладку Стиль чтобы определить высоту, а также ширину карты.
Если вы хотите иметь карту полной ширины, установите раздел, содержащий карту, на полную ширину. Для этого нажмите на ручку раздела.
Во вкладке и блоке раскладка установить ширину содержимого на полная ширинаr и разрыв столбца на Нет отклонения
Нажмите кнопку ОПУБЛИКОВАНОER в нижней части левой панели, чтобы опубликовать свою страницу.
Вставить карту на страницу или в публикацию
Если по какой-то причине вы предпочитаете встраивать свою карту в редактор страницы/записи (страница/запись, созданная с помощью редактора WordPress по умолчанию — Gutenberg), вы можете использовать Плагин Wordpress Блоки Elementor для Гутенберга. Этот плагин преобразует шаблон Elementor в блок Gutenberg.
Чтобы сохранить только что созданную карту в качестве шаблона Elementor, щелкните значок стрелки рядом с кнопкой ПУБЛИКАЦИЯ / ОБНОВЛЕНИЕ и выберите Сохранить как шаблон.
Дайте вашей модели имя и нажмите кнопку ЗАПИСЫВАТЬ.
Затем создайте новую страницу или запись (убедитесь, что вы установили Elementor плагин Блоки для Гутенберга). Добавьте новый блок и выберите Библиотека элементов и выберите только что созданный шаблон.
Примечание: Если вы видите сообщение «Только для целей разработки» при добавлении карты, обязательно включите выставление счетов в Google Cloud. Новая политика Google требует, чтобы разработчики активировали платежный аккаунт (вы по-прежнему можете бесплатно использовать Google Maps API).
Получить Elementor Pro сейчас !!!
Заключение
Так ! Вот и все для этой статьи, в которой показано, как создать карту с несколькими местоположениями с помощью Elementor. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите об этом в Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
