TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

153

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

По теме: Как встраивать PDF-файлы в WordPress?

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

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

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

  • Для этого откройте веб-сайт Google Maps и найдите место или область, которую хотите отобразить на карте.
  • Это сфокусирует карту на интересующей вас области и отобразит различные опции прямо под результатом на левой панели. Щелкните ссылку «Поделиться».

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

Поиск на картах

  • В появившемся всплывающем окне перейдите на вкладку «Вставить карту» и нажмите «КОПИРОВАТЬ HTML», чтобы скопировать код для встраивания карты .

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

Копировать код

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

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

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

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

HTML-блок

  • Вставьте код встраивания Google Map в редактор блоков.

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

Вставить код

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

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

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

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

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

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

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

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

Создать собственную карту

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

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

Настроить карту

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

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

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

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

Поделиться картой

  • Установите для параметра «У кого есть доступ» значение «Общедоступно в Интернете» и нажмите «Готово».

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

Настройки обмена

  • Чтобы изменить настройки доступа, нажмите ссылку «Изменить…». Откроется новое всплывающее окно, отметьте первый вариант и нажмите кнопку «Сохранить».

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

Обмен ссылками

  • Теперь щелкните значок меню карты (три точки) рядом с названием карты и выберите «Вставить на мой сайт».

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

Вставить на сайт

  • Скопируйте HTML-код из поля кода для встраивания карты Google.

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

Пользовательский код для встраивания

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

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

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

Предварительный просмотр публикации

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

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

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

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

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

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

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

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

Ключ API

  • Прокрутите настройки карты на вкладке «Карты», чтобы включить / отключить различные функции карты, установить уровень доступа и так далее.

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

Настройки карт

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

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

Сохранить настройки

По теме: Как установить WordPress локально на Mac?

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

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

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

Детали карты

  • Выберите тему для своей карты на вкладке «Тема».

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

Выберите тему

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

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

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

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

Источник записи: www.webnots.com
Leave A Reply

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