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

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

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

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

Если вы создаете с помощью 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.

Ссылки по теме:

• Получаем ключ API здесь
• Как получить ключ API рассказал здесь, а показал здесь: https://www.youtube.com/watch?v=KO5ofOfSJaM&t=908s