Googleの仕様変更があり、新プラン「Google Maps Platform」が適用され、

Google Maps Platformから正しく登録・取得したAPIキーが必須となりました。

■地図が表示されない要因

① APIキーを利用していない場合
Google Maps Platform APIキーを取得し、htmlソース内のkeyを書き換えます。
②地図のリクエスト数が月間28,000マップロードを超過した場合
地図のリクエスト数に制限があり月間28,000マップロードまでは無償で表示されますが、それを超過すると地図が表示されなくなります。料金を支払うことで地図を継続して表示させることができます。
（無償枠の利用であっても請求先クレジットカードの登録が必須です）
③請求先アカウントとプロジェクト(APIキー)を紐づけていない場合

▼詳しくは下記参照
https://www.zenrin-datacom.net/business/gmapsapi/price/

■APIキーの発行手順

▼下記サイトに詳しく説明されています。こちらに沿って設定を行ってください。
https://www.zenrin-datacom.net/business/gmapsapi/api_key/

○主な手順

・Googleアカウントの作成　https://support.google.com/accounts/answer/27441?hl=ja

・プロジェクトの作成　 https://console.cloud.google.com/?hl=ja

・APIの有効化　「Maps JavaScript API」の認証とキー取得

・APIキーの作成

・APIキーに制限を追加　※「キーの制限」の設定で、HTTP リファラー （ウェブサイト）を選択

・支払い情報の登録（クレジットカード）

・APIキーの設定確認　Google Chromeの拡張機能 Google Maps Platform API Checker

○「認証情報の登録」の設定について
「キーの制限」の設定で、「HTTP リファラー （ウェブサイト）」を選択します。
HTTP リファラー とは、マップを埋め込むサイトの指定についてです。
キーの制限を行わずにAPIキーを利用した場合、第三者に情報が洩れAPIキーが不正使用される恐れがあるため設定をしておきましょう。

例えばドメイン、https://www.example.com/ の場合は、入力欄に「www.example.com/*」と入力します。
例えばサブドメイン、https://test.example.com/ 、または配下階層全てにおいてAPI使用を許可する場合は、入力欄に「*.example.com/*」と入力します。

※「example.com」の部分は実際のAPI使用のドメインに書き換えてください。

またHTTPリファラーは複数登録できます。
example.com/*
.example.com/*
*.example.com/*
www.example.com/*

HTTPリファラー設定後、反映に最大で5分かかることがあります。

<script src=”https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxx”></script>

xxxxxxxxxxxxxの部分にAPIキーを設定します。

■Wordpressのプラグイン「TCD Google Maps」で使用する場合
TCDテーマオプション　＞　基本設定内　＞ APIキー（ここにAPIキーを入力）

APIキーの取得には請求先のクレジットカード登録が必須で、請求先登録をしていないと地図表示はされません。

アクセス数がそれほど多くないサイトならば月額無償枠で使用できるため、特に心配ないと思いますが、知らないうちに無償枠を超え請求が発生するのも困ります。

利用料金を発生させたくない場合は利用量を制限することが可能です。

▼下記にアクセスして設定を行います
https://console.cloud.google.com/google/maps-apis/overview

使用中のAPIを選択　＞　API　 ＞　割り当て

無償範囲で利用したい場合は、月間28,000リクエスト以下になるように設定します。
ここでは少し余裕をもたるため25,000と入力しました。

Geocoding APIとは住所を緯度経度などの座標に置き換える API です。
GoogleMap APIを使用するためにはこのAPIも有効にする必要があります。