WordPress

【2018年最新版】Advanced Custom FieldでGoogle Mapがエラーが出た時の対処!正しく読み込まれない、検索ができないを解決!

Advanced Custom Fields(ACF)でGoogleMapを使用するときに、読み込みのエラーになってしまう時の対処法です。

2018年6月11日より、Google Maps Platformという新しいサービスが始まり、料金体系の変更などが行われました。

あわせて読みたい
【2018年度版】「Googleマップが正しく読み込まれませんでした」の原因と対策今までGoogle MapをWEBサイトに埋め込む場合(iframe埋め込みは除く)には、 「Google Maps AP...

今回は最新版でのエラーの対象法をご紹介します。

エラー1:Googleマップが正しく読み込まれませんでした

まずは、GoogleMapのフィールドに「このページではGoogleマップが正しく読み込まれませんでした。」というエラーの対処法です。

GoogleMap エラー

Functions.phpでスクリプトを読み込む

ACFでGoogleMapのフィールドを追加しただけでは使用ができません。GoogleMapのAPIキーを発行して、スクリプトを読み込む必要があります。

まずはfunctions.phpでスクリプト読み込ませましょう。

「APIキー」に取得したGoogleMap APIキーを入力してください。

続いて書きも追加しましょう。

ACFのPRO版を使用している場合は、上記の記述の代わりに下記を記述をしてください。

これでGoogleMapのフィールドのエラーが消えるかと思います!

あわせて読みたい
【2018年度版】「Googleマップが正しく読み込まれませんでした」の原因と対策今までGoogle MapをWEBサイトに埋め込む場合(iframe埋め込みは除く)には、 「Google Maps AP...

エラー2:地図の検索ができない!!

GoogleMapが無事表示されるようになったけど、「検索ができない?!」

Places APIを有効化

そんなときは、APIライブラリでPlaces APIを有効化にしましょう!

Places APIを有効化にすることで、無事検索機能も使えるようになりました。

まとめ

ACFでエラーが出た場合は、上記を確認してみてください!

また、うまく動作しない場合には、Develoer ToolなどでConsoleにエラーメッセージが出ていないかもチェックしましょう!エラーメッセージがある場合には、それを調べたりすると解決策が見つかるかと思います!