GoogleMAP:このページでは google マップが正しく読み込まれませんでした。
GoogleMAP で、このページでは google マップが正しく読み込まれませんでした。
というエラーが地図上に表示されました orz・・・
結果をいうと、支払い情報の設定、APIの設定(リファラーなど)はしてたが、APIキーをプログラム側(JS)に設定 してなかった。
src="//maps.googleapis.com/maps/api/js?sensor=true"
src="//maps.googleapis.com/maps/api/js?sensor=true&key=[今回作成したAPIキー]"
情報の整理
今まで、適当に設定してやっていたので・・・。GoogleMAP を使用するにあたり情報を整理。
以前は Google Maps APIs には、PremiumPlan(有償)、StandardPlan(無償) があったが、Google Maps Platformに統合され。一定の利用までは無償で、それ以降は有償。 そのため、以下の場合には エラーがでるようです。
エラーがでる原因
- APIキーを利用していない
- 今回は APIキーは作成していたが、プログラム側に未設定。
- APIキーを利用しているが、無償枠を超えた。
- 毎月200ドル相当分は無料 料金表はこちら
- 請求先アカウント未登録
Google側の画面
Google側の画面は、もともとバラバラだった機能が、一つに統合されていってるようなので、どこに何があるか、わかりづらい・・・ので、 適当に画面遷移だけ 貼っておきます。
まずはこちらをクリック
APIキーの有効化
左上のメニュー -> APIとサービス -> ダッシュボード
APIキーの作成と設定
作成
設定
WEBサイトで利用する場合は、HTTPリファラー にして、URL入力欄に URL を入力するのが無難です。IPアドレス の場合は、サーバーを変更したときに、設定しなおす必要があるので、たぶん、忘れるので・・・注意です。
プログラム(JS)を修正
今回取得・設定した APIキーを プログラム側に設定。
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=true&key=[今回作成したAPIキー]"></script>
これで、GoogleMAP がきっちり表示されました!
編集する
