WordPressのプラグイン『Advanced Custom Fields』で顧客データベースを作るケースが多いかと思います。
2018年6月Google MAPの環境が変わった事で、GoogleMapのエリアが灰色になり「このページではGoogleマップが
正しく読み込まれませんでした。」というエラーが表示される様になりました。

このエラーの原因は、Google MAPの課金制度の変更によります。
MAPの表示回数が増えると有料になる新しい課金制度に合わせる為、対応を今回実施致しました。

簡単に言うと以下の通り。

1．課金可能なGoogleアカウント（クレジットカードなどを登録している）を準備
2．Google cloud Platformから、新規プロジェクトを登録
3．Google MAP API にアクセスをして、開始を押す
4．Enable Google Maps Platform　と表示されるので、MAPS、Toutes,Places すべてチェックして継続
5．2で登録したプロジェクトを選択する
6．API KEYを取得する画面が出るので、メモ（コピー）をする
7．Google cloud Platformから、APIとサービスを選択
8．ライブラリーを押すと、登録できるAPIの箱が表示されるので、押して利用するを選択する
9．認証を押して、APIキーを有効にする
10．Advanced Custom Fieldsで作成したテンプレートで以下の訂正を入れる
　　
＜script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false”＞＜/script＞
↓
＜script src=”https://maps.googleapis.com/maps/api/js?key=取得したキー”＞＜/script＞
※＜＞は全角にしています。

11. テーマのfunction.phpに以下のコードを追加する

function my_acf_google_map_api( $api ){
$api[‘key’] = ‘取得したキー’;
return $api;
}
add_filter(‘acf/fields/google_map/api’, ‘my_acf_google_map_api’);