GoogleMAP:このページでは google マップが正しく読み込まれませんでした。

###error
GoogleMAP で、このページでは google マップが正しく読み込まれませんでした。

###center error
(img://21/243m)
### center
というエラーが地図上に表示されました orz・・・

###ret dig
結果をいうと、支払い情報の設定、APIの設定(リファラーなど)はしてたが、#*#APIキーをプログラム側(JS)に設定 してなかった。

###source error dig
src="//maps.googleapis.com/maps/api/js?sensor=true"

###source ret dig
src="//maps.googleapis.com/maps/api/js?sensor=true&key=[今回作成したAPIキー]"

###title
情報の整理
###memo
今まで、適当に設定してやっていたので・・・。GoogleMAP を使用するにあたり情報を整理。

###q2
以前は Google Maps APIs には、PremiumPlan(有償)、StandardPlan(無償) があったが、Google Maps Platformに統合され。#+#"一定の利用までは無償で、それ以降は有償"。 そのため、以下の場合には エラーがでるようです。

###list2
(エラーがでる原因)
- APIキーを利用していない
-- #R#"今回は APIキーは作成していたが、プログラム側に未設定。"
- APIキーを利用しているが、無償枠を超えた。
-- 毎月200ドル相当分は無料 料金表はこちら(https://cloud.google.com/maps-platform/pricing/sheet/?hl=ja)
- 請求先アカウント未登録

###title
Google側の画面
###
Google側の画面は、もともとバラバラだった機能が、一つに統合されていってるようなので、どこに何があるか、わかりづらい・・・ので、 適当に画面遷移だけ 貼っておきます。"まずはこちらをクリック"(https://console.cloud.google.com/?hl=ja)

###title
APIキーの有効化

###explain
左上のメニュー -> APIとサービス -> ダッシュボード
###center
(img://21/237m)

###center
(img://21/238m)

###explain
-> Mapps JavaScript API

###center
(img://21/244m)

###explain
有効になってればOKです。
###center

(img://21/240m)

###title
APIキーの作成と設定
###
"まずはこちらをクリック"(https://console.cloud.google.com/?hl=ja)

###
APIとサービス -> 認証情報

###center
(img://21/245m)

###title3
作成
###
認証情報 -> 認証情報を作成 -> APIキー
###ret
クリックするとすぐにキーは作成されます。
###center
(img://21/242m)

###title3
設定
###memo
作成したキーをクリックして設定します。
###center
(img://21/246m)

###  dig
WEBサイトで利用する場合は、#*#"HTTPリファラー" にして、URL入力欄に URL を入力するのが無難です。#*#"IPアドレス" の場合は、サーバーを変更したときに、設定しなおす必要があるので、たぶん、忘れるので・・・注意です。
###center
(img://21/241m)

###title
プログラム(JS)を修正
###
今回取得・設定した APIキーを プログラム側に設定。
###source
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=true&key=[今回作成したAPIキー]"></script>

###center 
これで、GoogleMAP がきっちり表示されました!

wakatta 記法

このコンテンツを見る