web-dev-qa-db-ja.com

Google Maps Javascript APIを使用してGoogle Mapsがワードプレスで表示されない

誰かが私を手伝ってくれるかどうか疑問に思いました。私は現在、ローカルホスト上のワードプレスで動作するようにGoogleマップのJavaScript APIを設定しようとしていますが、私は運がありませんでした。以下の私のステップを見つけてください。

- ステップ1：Google Developer API Managerに行き、Google Maps Javascript APIのAPIを有効にしました。

- 手順2：APIキーを生成しました。

- ステップ3：私はそう地図Javascript APIをうらやみ、それがkey = {MY API KEY}と言うAPIキーを含めました：

 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ファイルを作成し、私がそれを要求したディレクトリにロードしました。

-Step 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エラーが表示されず、開発者コンソールのエラーも表示されません。なぜこれが起こっているのか誰にもわかりません。私は助けに感謝します。

theme-developmentjavascriptapigoogle-maps
3
steamfunk

ちょっといじることでこれを動かすことができました。 #map-canvas要素に高さを指定します（CSSでこれを行うことができます）。

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

callback引数をgoogle-mapsスクリプトURLに追加し、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