Advanced Custom Fields(ACF)でGoogleMapを使用するときに、読み込みのエラーになってしまう時の対処法です。
2018年6月11日より、Google Maps Platformという新しいサービスが始まり、料金体系の変更などが行われました。
![](https://kazuland.jp/wp-content/uploads/2018/07/gmap-320x180.jpg)
今回は最新版でのエラーの対象法をご紹介します。
目次
エラー1:Googleマップが正しく読み込まれませんでした
まずは、GoogleMapのフィールドに「このページではGoogleマップが正しく読み込まれませんでした。」というエラーの対処法です。
![GoogleMap エラー](https://kazuland.jp/wp-content/uploads/2018/07/eb6aa827194f0c86049a624519d317b2.png)
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のフィールドのエラーが消えるかと思います!
![](https://kazuland.jp/wp-content/uploads/2018/07/gmap-320x180.jpg)
エラー2:地図の検索ができない!!
GoogleMapが無事表示されるようになったけど、「検索ができない?!」
Places APIを有効化
そんなときは、APIライブラリでPlaces APIを有効化にしましょう!
![](https://kazuland.jp/wp-content/uploads/2018/07/gmap_api_places.jpg)
Places APIを有効化にすることで、無事検索機能も使えるようになりました。
まとめ
ACFでエラーが出た場合は、上記を確認してみてください!
また、うまく動作しない場合には、Develoer ToolなどでConsoleにエラーメッセージが出ていないかもチェックしましょう!エラーメッセージがある場合には、それを調べたりすると解決策が見つかるかと思います!