Intereting Posts
Возможны ли страницы архива категории или тега? Как сохранить визуальные патчи с сложной структурой URL? Пользовательский шаблон сообщения? Получить шаблонную часть на основе пользовательского таксономического термина Почему временные функции показывают недействительный часовой пояс при использовании формата времени «c»? Как назначить разных пользователей на разные страницы? Применять template_include для работы, когда allow_url_include отключен? Редактировать изображение / Удалить ссылку на изображение Как устранить проблемы WordPress? Определить переменную PHP из отдельного API, если оператор update_option в javascript Как остановить или удалить действие, вызываемое внутри функции расширенного класса как изменить постоянные ссылки с id на имя определенного местоположения Удалить описание на экране редактирования пользовательской таксономии Манипулировать список тем в wp-admin В чем преимущества API настроек?

Внедрение Google Maps JS на WordPress

Я ищу, чтобы реализовать этот код на моем сайте WordPress максимально эффективно

https://developers.google.com/maps/documentation/javascript/styling

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

РЕДАКТИРОВАТЬ:

Что делать, если я использую часть очереди внутри функции? Это хорошая конструкция?

function x_shortcode_google_map( $atts, $content = null ) { extract( shortcode_atts( array( 'id' => '', 'class' => '', 'style' => '', 'lat' => '', 'lng' => '', 'drag' => '', 'zoom' => '', 'zoom_control' => '', 'height' => '', 'hue' => '', 'no_container' => '', 'api_key' => '' ), $atts, 'x_google_map' ) ); static $count = 0; $count++; $id = ( $id != '' ) ? $id : 'x-google-map-' . $count; $class = ( $class != '' ) ? 'x-map x-google-map ' . esc_attr( $class ) : 'x-map x-google-map'; $style = ( $style != '' ) ? 'style="' . $style . '"' : ''; $height = ( $height != '' ) ? 'style="padding-bottom: ' . $height . ';"' : ''; $no_container = ( $no_container == 'true' ) ? '' : ' with-container'; $js_params = array( 'lat' => ( $lat != '' ) ? $lat : '40.7056308', 'lng' => ( $lng != '' ) ? $lng : '-73.9780035', 'drag' => ( $drag == 'true' ), 'zoom' => ( $zoom != '' ) ? $zoom : '12', 'zoomControl' => ( $zoom_control == 'true' ), 'hue' => ( $hue != '' ) ? $hue : '', ); $data = cs_generate_data_attributes( 'google_map', $js_params ); $script_url = 'https://maps.googleapis.com/maps/api/js'; if ( $api_key ) { $api_key = esc_attr( $api_key ); $script_url = add_query_arg( array( 'key' => $api_key ), $script_url ); } wp_register_script( 'cs-google-maps', $script_url ); wp_enqueue_script( 'cs-google-maps' ); $output = "<div id=\"{$id}\" class=\"{$class}{$no_container}\" {$data} {$style}><div class=\"x-map-inner x-google-map-inner\" {$height}></div>" . do_shortcode( $content ) . "</div>"; return $output; } add_shortcode( 'x_google_map', 'x_shortcode_google_map' ); 

Прежде всего, установите API Google Maps API правильно. найдите функцию, которая подключена к wp_enqueue_scripts и wp_enqueue_script() чтобы установить API Карт Google.

 function wp_mk_scripts() { if ( is_singular() ) { wp_enqueue_script( 'wp-mk-maps-js', 'https://maps.googleapis.com/maps/api/js', array( 'jquery' ), null, true ); wp_enqueue_script( 'wp-mk-gmaps-function', get_stylesheet_directory_uri() . '/js/maps.js', array( 'jquery' ), null, true ); } } add_action( 'wp_enqueue_scripts', 'wp_mk_scripts' ); 

то в вашей theme_folder / js / maps.js вставьте код карты между тегами <script></script> в Style Google Maps

Теперь вызовите <div id="map"></div> любом месте шаблона, чтобы отобразить карту.