2016/06/09追記:
2018/06/11からGoogle Map APIの課金体系が変更になり、再度マップが表示されなくなる可能性があります。
少し古い話ですが、2016年6月22日から、Google Map APIの利用に開発者向けAPIキーが必ず必要になりました。
そのために、APIキーを使わずに新しくGoogle Mapを作成すると、
Google Maps API error: MissingKeyMapError
というエラーが発生し、地図が表示出来ない場合があります。
そんな時のためのAPIキーいらずのGoogle Map埋め込み方法はこちらです。
APIキーの取得・利用方法
Google Map APIを利用する場合には、Webだけでなく、Androidアプリなどでの利用でも同様の制約を受けるものと思います。
http://googlegeodevelopers.blogspot.jp/2016/06/building-for-scale-updates-to-google.html?m=1
The new policies will apply immediately to all Maps API implementations created on or after June 22nd, 2016.
とありますので、6/22以前に作成されたグーグルマップについてはそのまま使える様子です。
APIをご利用の場合はAPIキーを以下のURLから取得して、以下の例のYOUR_API_KEYの箇所に追加してください。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
type="text/javascript"></script>
APIキー取得URL:https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true&pli=1
※URLの記載を変更しました(2016/10/27)
また、Google Mapの埋め込み機能を利用する場合はAPIキーは不要です。
自社や数店舗のお店の地図を表示するだけなら、埋め込み形式に変更することをお勧めします。
文末に埋め込み形式でGoogle Mapを表示する方法を記載しています。
非常に簡単です。
WordPressのプラグイン、Simple MapなどもAPIキーを設定できるようにはなっていないため、これから作るものについては影響を受ける様子です。
試しにこのプラグインで新しくマップを作ってみましたが、
「Google Maps API error: MissingKeyMapError 」
が出てしまいました。
また、「Google Maps API warning: NoApiKeys」というワーニングだけが出て、地図は表示される場合もあります。
どの企業サイト、お店、その他もろもろでもはや必須と言っても過言ではないGoogle Map。
無料で提供し続ける限界を超えたのでしょうか。
死ぬほど儲かってるくせに。
Oracleとの訴訟でも勝ちそうなのに。
うそです。
今まで無料で使わせていただいてありがとう。
でも、ほとんどグーグルマップの埋め込み機能を使っているので、これらかも無料で使わせていただくわけですが。
Google Maps APIはAPIキーさえ取得すれば、24時間に1,000個以内しか地図を表示しないのであれば無料で使えます。
それ以上、150,000個以下も無料ですが、クレジットカードの登録が必要です。
150,000を超えたら自動的に課金されるのかと思ったら、エラーが出るようになる様子。
そこは優しさなのか、何なのか。
https://developers.google.com/places/android-api/usage
Google Mapを埋め込む方法
非常に簡単な手順で埋め込むことが出来ます。
1.まず、ブラウザでGoogle Mapを使い、目的の場所を検索して表示します
例ではあべのハルカスを表示しています。
2.左上の赤丸で囲っているハンバーガーメニューをクリックすると、左サイドにメニューが表示されます。
そこから、「地図を共有または埋め込む」を選択してください。
3.表示されたダイアログから「地図を埋め込む」を選択し、選択状態になっているHTMLコード(反転表示されている<iframe src=””….の部分)をコピーします。
※利用規約に同意した上で。もちろん。
4.その内容を地図を表示するHTMLにそのままペーストします。
CMSであれば、地図を表示する箇所にペーストします。
ペーストしたのが下の地図です。
※追記
APIキーを追加しても以下のエラーが出る場合、APIキーに紐付けられているリファラーの記述が間違っているかもしれません。
Google Maps API error: RefererNotAllowedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: ~
Googleの入力例では
*.example.com/*
となっています。
http://www.example.com/
や
example.com
といった記述で登録するとAPIを呼び出しているURLとマッチしないので、上記エラーが発生するようです。
Google Map APIの課金体系が変更になります
2018/09/06追記:
基本的には有料になりますが、月額200ドルまでは無料枠として使えます。
Google Map APIを利用しているユーザーには「[Action Required] Changes to your Google Maps APIs account」というタイトルのメールが来ているかと思います。
要点だけ記述すると、
- 月額使用料のうち、200ドルを無料枠として提供します。
- 請求先アカウントを有効にして、Google Maps Platformプロジェクトに関連付ける必要があります。
2番目がクセモノっぽいですよね。
アカウントで請求を有効にする手続きが必要です。
下記サイトに詳しいですので、参考に作業してみてください。