Используем Elementor + ACF для отображения карты Google

В этом видео я расскажу как вставить карту Google на странице с помощью визуального конструктора Elementor и плагина Advanced custom fields.

Мы создадим карту и произвольные поля для вставки адреса. Потом адрес (с произвольного поля) выведем на карте.

Где это можно использовать?

Используем Elementor + ACF для отображения карты Google

Если вы создаете с помощью Elementor сайт-каталог магазинов, складов, недвижимости, объявлений, каталог специалистов и т.д. Вы можете создать произвольные поля для адреса (или для ввода широты и долготы), привязываете эти поля к стандартным записям или создаете произвольный тип записи.

Потом произвольные поля привязываете к карте Google. В моем примере я использую для вывода карты обычную страницу, которая создана с помощью Elementor.

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

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

Смотреть видео

  • Активируем плагин Advanced custom fields и создаем произвольное поле для ввода адреса. Произвольное поле привязываю к странице Контакты.
  • Для работы ACF с картами Google необходимо получить ключ API. Получаем ключ и вставляем его на сайте.
  • Вводим адрес в произвольном поле.
  • Вставляем на страницу карту Google и подключаем к ней произвольное поле.
  • Как создать произвольный тип записи? Какие есть плагины для этого?
  • Выводы

Регистрация ключа API на сайте

Если используется бесплатная версия плагина Advanced Custom Fields вставляем следующий код в файл functions.php:

function my_acf_google_map_api( $api ){
    $api['key'] = 'xxx';   
    return $api;   
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

Если используется плагин Advanced Custom Fields PRO вставляем следующий код в файл functions.php:

function my_acf_init() {
    acf_update_setting('google_api_key', 'xxx');
}
add_action('acf/init', 'my_acf_init');

Вместо ХХХ вставляем свой ключ API.

Ссылки

Специальное предложение: плагин Advanced Custom Fields PRO + автоматические бесплатные обновления на вашем сайте. Помогу с установкой этого плагина, чтобы вы могли наслаждаться возможностями версии pro. Интересует? Напишите мне в контакты.


Если твой бизнес связан с: онлайн-курсами, вебинарами, онлайн-тренингами и коучингом, то FONDY — лучший сервис приема платежей на твоем сайте.
 

Понравилась статья? Поделиться с друзьями:
ОБ АВТОРЕ
Николай Пекарский
Автор сайта. Фрилансер. Занимаюсь созданием сайтов на WordPress, локализацией шаблонов и плагинов WordPress.
Добавить комментарий

Используйте теги <code>Здесь ваш код</code>, чтобы вставить код в свой комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Задать вопрос