gaggitのブログ

コーディング、ガジェット、TIPS関連、FX

Google Maps API 地図(マップ)が表示されない 解決

Google Cloud PlatformのサイトからGoogle Maps APIAPIキーを作成後、htmlでGoogle Mapを表示させようとましたが、「このページでは Google マップの要素を表示できませんでした。」とポップアップメッセージが出てエラーとなる。

f:id:gaggit:20160417082239p:plain

まず、これだけではどんなエラーなのか、分かりません。

1.使用してるブラウザ(IE,Firefox,Chrome)でF12キーを押して、デバッガを起動します。(ここでは、IEをベースに話します)

2.コンソールをクリックし、htmlを更新します。

Google Maps API error: InvalidKeyMapError、ApiNotActivatedMapErrorなどが表示されていると思います。

InvalidKeyMapErrorの場合は、APIキーのスペルを間違えている、キーの両端にスペースが入っている、キーの両側をかっこで括っているなどが考えられます。

ApiNotActivatedMapErrorの場合は、APIキーが有効になっていないか、APIキーの種別を間違えているので、もう一度、APIlキーの認証画面で、APIGoogle Maps JavaScript API(ブラウザ用)となっているか、APIキーの有効/無効の確認をしましょう。

エラーの詳細は、

http://hthttps://developers.google.com/maps/documentation/javascript/error-messages?hl=ja#deverrorcodestps://console.developers.google.com/project

から。

今日もがじがじっと~♪