it-swarm.com.ru

Карты Google не отображаются в WordPress с помощью API JavaScript Карт Google

Мне было интересно, если кто-нибудь может мне помочь. В настоящее время я пытаюсь настроить JavaScript API Google Maps для работы с WordPress на локальном хосте, но мне не повезло. Пожалуйста, найдите мои шаги ниже.

-Шаг 1: я зашел в Менеджер API разработчика Google и включил API для API JavaScript Карт Google.

Шаг 2: Я сгенерировал ключ API.

Шаг 3: Я включил API Javascript для карт примерно так и добавил ключ API, где написано: ключ = {MY API KEY}:

 if ( ! function_exists( 'foundationpress_scripts' ) ) :
        function foundationpress_scripts() {



     //Load Google Maps API   
        wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key={MY API KEY}' );


 //Load custom JS script    
     wp_enqueue_script('custom-scripts', get_stylesheet_directory_uri() . '/assets/javascript/custom/custom-scripts.js', array(), '1.0.0', true ); 


    // Add the comment-reply library on pages where it is necessary
        if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
            wp_enqueue_script( 'comment-reply' );
        }

        }

        add_action( 'wp_enqueue_scripts', 'foundationpress_scripts' );
    endif;

Шаг 4: Я создал файл custom-scripts.js и загрузил его в каталог, в который я его добавил.

Шаг 5: я добавил

 var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }

в файл custom-scripts.js.

Шаг 6: Я создал страницу шаблона и связал ее со страницей внутри панели инструментов и добавил <div id="map-canvas"></div>.

Я не получаю никаких ошибок WP_DEBUG и не получаю никаких ошибок консоли разработчика. Кто-нибудь знает, почему это происходит? Я ценю помощь.

3
steamfunk

Я смог заставить это работать после небольшого возни. Присвойте элементу #map-canvas высоту (вы можете сделать это в CSS):

<div id="map-canvas" style="height:500px"></div>

Добавьте аргумент callback в URL-адрес сценария google-maps и добавьте атрибуты defer и async в тег сценария google-maps. Также сделайте custom-scripts зависимостью для google-maps:

if ( ! function_exists( 'foundationpress_scripts' ) ) :
function foundationpress_scripts() {
    //Load custom JS script    
    wp_enqueue_script('custom-scripts', get_stylesheet_directory_uri() . '/assets/javascript/custom/custom-scripts.js', array(), '1.0.0', true ); 

    // Load Google Maps API. Make sure to add the callback and add custom-scripts dependency
    wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap',  array( 'custom-scripts' ) ); 

    // Add the comment-reply library on pages where it is necessary
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}

add_action( 'wp_enqueue_scripts', 'foundationpress_scripts' );
endif;

// Add async and defer attributes
function google_maps_script_attributes( $tag, $handle) {
    if ( 'google-maps' !== $handle ) {
        return $tag;
  }
    return str_replace( ' src', ' async="async" defer src', $tag );
}
add_filter('script_loader_tag', 'google_maps_script_attributes', 10, 2);

Обязательно сделайте полную перезагрузку в вашем браузере после того, как все исправите.

3
Dave Romsey