読者です 読者をやめる 読者になる 読者になる

システム開発・構築の神様

新しいサービスや技術を使った開発や構築。その他不具合解決など

google mapの利用はAPI Keyが必須になっている

Google API 地図

久しぶりに、Google Map Apiを利用した、地図をサイト上に設置しようとしたところ

地図が一瞬表示された後に、エラーメッセージ「エラーが発生しました。」が表示されてしまう。(肝心の地図は表示されません)

コンソール画面(エラー内容)

common.js:47 Uncaught TypeError: Cannot read property 'prototype' of undefined

どうやら今年2016年6月22日から、API Keyの設定が必須になったらしいです。

(対象は新規サイトのみ。既存のサイトは、未設定のまま動作するようです。これもいつ仕様が変更されるのか?分からないため不安ですね)

Google Map API Keyの取得・設定方法

・Googleアカウントを既に持っていれば、ボタン一発で簡単にKEYを取得できます。

developers.google.com

・取得したAPI KEYを、下記のタグのように、ページ内に記載するだけです。

<script src="https://maps.googleapis.com/maps/api/js?key={USER_API_KEY}"></script>

すんなりと、地図が表示されるようになりました。

また、利用状況の詳細が、APIの管理ページから確認することができ、とても便利です。

Google Mapの利用にひと手間かかるようになりましたが、それ以上の情報が手に入るようになり、便利になりましたね。