wp_enqueue_script でkey付きのGoogle Maps APIを読み込む

WordPressでGoogle Maps APIを使用していたのですが、ふとGoogle Maps APIをwp_enqueue_scriptテンプレートタグで読み込むにはどうしたら良いのだろうか、と疑問に思ったのでメモしておきます。 何故疑問に思ったかと言うと、Google Maps APIは2016年6月から新規サイトではAPIキーの取得が必須になりましたが、この「APIキーが付いている状態で読み込ませる」という点が通常のJSと異なっているためです。 結論を言ってしまうと、通常の場合と同様にパスを記述すれば良いだけだったのですが……。 以下サンプルコード。

<?php
function es_googlemapsapi() {
    //?key= の後に実際のAPIキーを記述して読み込ませる
    wp_enqueue_script('googlemapsapi', 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', array(), '', true);
}
add_action('wp_enqueue_scripts', 'es_googlemapsapi');

こんな感じの記述をfunctions.phpに書くと読み込んでくれます。

<?php
function es_googlemapsapi() {
    //スラッグが'map'の固定ページだったら
    if(is_page('map')) {
        //?key= の後に実際のAPIキーを記述して読み込ませる
        wp_enqueue_script('googlemapsapi', 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', array(), '', true);
    }
}
add_action('wp_enqueue_scripts', 'es_googlemapsapi');

応用で特定の固定ページのみで読み込ませたい場合。今回はありがちな例としてmapというスラッグが設定されている固定ページのみマップを表示させたい、というケースはこんな感じの記述になるかと思います。 些細なことではあるのですが、備忘録として残しておきます。

参考

• 【2018年7月16日版】Google Maps の APIキー を取得する ? ねんでぶろぐ
• 【2018年最新版】Advanced Custom FieldでGoogle Mapがエラーが出た時の対処！正しく読み込まれない、検索ができないを解決！｜KAZULAND