3 способа встроить карты Google в сайт WordPress

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

Связанный: Как встроить PDF-файлы в WordPress?

Метод 1: встроить одну простую карту в WordPress

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

Шаг 1. Получите код для встраивания карты из Google Maps

  • Для этого откройте веб-сайт Google Maps и найдите место или область, которую хотите отобразить на карте.
  • Это сфокусирует карту на интересующей вас области и отобразит различные опции прямо под результатом на левой панели. Щелкните ссылку «Поделиться».
Поиск на картах
  • В появившемся всплывающем окне перейдите на вкладку «Вставить карту» и нажмите «КОПИРОВАТЬ HTML», чтобы скопировать код внедрения карты.
Копировать код
Копировать код
  • Вы можете настроить размер встраивания, щелкнув стрелку изменения размера и выбрав большой, средний или маленький в зависимости от ваших предпочтений.

Шаг 2: Вставка Google Maps на страницу / публикацию WordPress

  • Войдите в админку вашего сайта WP и откройте или создайте новую запись / страницу, на которую вы хотите добавить карту.
  • Добавьте редактор блоков и выберите блок «Пользовательский HTML» в категории «Форматирование».
HTML-блок
HTML-блок
  • Вставьте код встраивания карты Google в редактор блоков.
Вставить код
Вставить код
  • Теперь вы можете просмотреть и опубликовать сообщение / страницу. Если вы добавляете карту к существующей странице / публикации, нажмите «Обновить», чтобы сохранить изменения.
Предварительный просмотр основной карты
Предварительный просмотр основной карты

Метод 2: как встроить пользовательскую карту с несколькими маркерами местоположения

Шаг 1. Создание собственной карты Google

Во-первых, вы должны были создать собственную карту или создать новую.

  • Для этого откройте Карты Google с интерфейсом «Мои карты», выберите карту или нажмите «СОЗДАТЬ НОВУЮ КАРТУ», чтобы создать ее.
Создать собственную карту
Создать собственную карту
  • Настройте карту, добавив несколько маркеров местоположения, изменив значки, цвета и тему карты среди других элементов.
Настроить карту
Настроить карту

Изучите WordPress: Просмотрите более 300 бесплатных руководств по WordPress.

Шаг 2. Создайте код для встраивания карты Google

  • После построения карты вам необходимо настроить параметры совместного использования карты. Нажмите кнопку «Поделиться», чтобы получить доступ к мастеру настроек.
Поделиться картой
Поделиться картой
  • Установите для параметра «У кого есть доступ» значение «Общедоступно в Интернете» и нажмите «Готово».
Настройки обмена
Настройки обмена
  • Чтобы изменить настройки доступа, нажмите ссылку «Изменить…». Откроется новое всплывающее окно, отметьте первый вариант и нажмите кнопку «Сохранить».
Обмен ссылками
Обмен ссылками
  • Теперь щелкните значок меню карты (три точки) рядом с названием карты и выберите «Вставить на мой сайт».
Вставить на сайт
Вставить на сайт
  • Скопируйте HTML-код из поля кода вставки карты Google.
Пользовательский код для встраивания
Пользовательский код для встраивания

Шаг 3. Добавьте HTML-код в свой пост или страницу в WordPress

  • Чтобы встроить настраиваемую карту, повторите процесс, описанный в шаге 2 метода 1 выше.
  • Просмотрите и опубликуйте сообщение или страницу.
Предварительный просмотр публикации
Предварительный просмотр публикации

Метод 3: как встроить карты Google с плагинами WordPress

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

Шаг 1. Встраивайте Google Maps с плагинами WP Google Map

Установить плагин
Установить плагин

Шаг 2. Настройка WP Google Map Settings

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

Связанный: Как установить WordPress локально на Mac?

Шаг 3: Создание собственной карты

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

Шаг 4. Добавление маркеров на пользовательские карты

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

Подведение итогов

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

2

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *