WordPress で ちゃんとAPIキーを入れているのに、Googleマップが表示されない

Posted on Update by admin

コンソールエラー
Googleマップを使用した場合に、ちゃんとAPIキーを入れているのにマップが表示されない という ケースがありました。

ブラウザのコンソールにはこんなエラーが出ています。

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

これは 複数の Googleマップ が使えるプラグイン (またはテーマ) をロードする時に 「Google Maps API」と「ライブラリ」を 2 回以上読込んでたせいで、javascript エラーが発生し、マップが機能しなくなっています。

　
　

確認方法

該当のページのHTMLソースを見てください。ヘッダー部分 又は フッターあたりで <script type=’text/javascript’ src=～ で始まるコードで src内に
「//maps.google.com/maps/api/js～」または「//maps.googleapis.com/maps/api/js～」が どちらも1つずつ以上 か どちらかが２つ以上あれば、それが原因です。
Google Maps api HTMLソース
※「//maps.google.com/maps/api/js～」は旧タイプのアドレスです。現在は「//maps.googleapis.com/maps/api/js～」になっています。
　
　

対策方法

①GoogleMapsを使っているプラグインのどちらかの利用をやめて 1つだけにする。

会社や店舗等の地図だけでしたら GoogleMapsの埋込地図で十分だと思います。GoogleMapsの埋込地図でしたら影響はありません。

埋込地図はこちらの説明を読むと簡単に作ることができます。

Google Maps 地図を埋め込む、場所を共有する
https://support.google.com/maps/answer/144361

　

②該当のプラグインのソースを確認して いずれかの「Google Maps API」読込みの部分を wp_deregister_script する。

プラグインのソース内の wp_enqueue_script 又は wp_register_script の handle名 を調べて wp_deregister_script してください。
※phpとWordPressに精通してる方 向けになります。

　

スポンサードリンク



　

③不動産プラグインの場合

GoogleMapsを表示させるプラグインはたいてい、「Google Maps API」を常時読込をしています。
不動産プラグインの場合は「物件詳細ページ」、不動産マッププラグインの「インマップページ」のみ「Google Maps API」読込むようにしています。
そのせいで他のページではマップ表示されるのに「物件詳細ページ」「インマップページ」だけ表示しなくなります。

なるべく①の方法を採用して頂きたいのですがどうしても両方使いたい場合は、あくまで自己責任で 以下のコードをテーマの functions.php か my-plugin.php に追加してください。

不動産プラグインでの「Google Maps API」読込みを停止して、他のプラグインで読込んでいる 「Google Maps API」を利用するようにできます。

/*
 *不動産プラグインの「Google Maps API」読込スクリプトを停止する。
 *
 */
function remove_googlemapapi_js_fudoumap() {
	wp_deregister_script( 'googlemapapi' ); 
}
add_action( 'wp_enqueue_scripts', 'remove_googlemapapi_js_fudoumap', 12 );
add_action( 'wp_footer', 'remove_googlemapapi_js_fudoumap', 12 );

※GoogleMapsを表示させるプラグインは、まだ APIキーに対応していないものも多々あります。
　その場合は「APIキー無し」のせいで Google Maps が表示されなくなる事があります。

　
　

あとがき

コンソールにエラーを出しつつもマップは ちゃんと表示している場合もあります。しかしいつか突然に表示しなくなる可能性もありますのでチェックしておきましょうね。

今回、ざっと他のプラグインを見たのですが wp_enqueue_script の handle名 が「googlemaps-api」「google-maps-api」「googlemapapi」等バラバラでした。
wp_enqueue_script の handle名 をガイドライン的なもので 統一してくれたら、もし複数あっても WordPressは1つにしてくれるので そうならないかなと思いました。




スポンサードリンク