Advanced Custom Fields（ACF）でGoogleMapを使用するときに、読み込みのエラーになってしまう時の対処法です。
2018年6月11日より、Google Maps Platformという新しいサービスが始まり、料金体系の変更などが行われました。
【2018年度版】「Googleマップが正しく読み込まれませんでした」の原因と対策今までGoogle MapをWEBサイトに埋め込む場合（iframe埋め込みは除く）には、「Google Maps AP...
今回は最新版でのエラーの対象法をご紹介します。
スポンサーリンク
目次
エラー１：Googleマップが正しく読み込まれませんでした
まずは、GoogleMapのフィールドに「このページではGoogleマップが正しく読み込まれませんでした。」というエラーの対処法です。
Functions.phpでスクリプトを読み込む
ACFでGoogleMapのフィールドを追加しただけでは使用ができません。GoogleMapのAPIキーを発行して、スクリプトを読み込む必要があります。
まずはfunctions.phpでスクリプト読み込ませましょう。
1 2 3 4 5 6 7 8 | <?php function add_googlemap_script() { wp_enqueue_script( 'googlemap', 'https://maps.googleapis.com/maps/api/js?key=APIキー', array(), '', true ); } add_action( 'wp_enqueue_scripts', 'add_googlemap_script' ); ?> |
「APIキー」に取得したGoogleMap APIキーを入力してください。
続いて書きも追加しましょう。
1 2 3 4 5 6 7 8 9 10 | <?php function my_acf_google_map_api( $api ){ $api['key'] = 'APIキー'; return $api; } add_filter('acf/fields/google_map/api', 'my_acf_google_map_api'); ?> |
ACFのPRO版を使用している場合は、上記の記述の代わりに下記を記述をしてください。
1 2 3 4 5 6 7 8 9 | <?php function my_acf_init() { acf_update_setting('google_api_key', 'APIキー'); } add_action('acf/init', 'my_acf_init'); ?> |
これでGoogleMapのフィールドのエラーが消えるかと思います！
【2018年度版】「Googleマップが正しく読み込まれませんでした」の原因と対策今までGoogle MapをWEBサイトに埋め込む場合（iframe埋め込みは除く）には、「Google Maps AP...
エラー２：地図の検索ができない！！
GoogleMapが無事表示されるようになったけど、「検索ができない？！」
Places APIを有効化
そんなときは、APIライブラリでPlaces APIを有効化にしましょう！
Places APIを有効化にすることで、無事検索機能も使えるようになりました。
まとめ
ACFでエラーが出た場合は、上記を確認してみてください！
また、うまく動作しない場合には、Develoer ToolなどでConsoleにエラーメッセージが出ていないかもチェックしましょう！エラーメッセージがある場合には、それを調べたりすると解決策が見つかるかと思います！
スポンサーリンク
スポンサーリンク
