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というスラッグが設定されている固定ページのみマップを表示させたい、というケースはこんな感じの記述になるかと思います。

些細なことではあるのですが、備忘録として残しておきます。

参考

この記事を書いた人

アバター

アルム=バンド

フルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。