スキップしてメイン コンテンツに移動

【Maps JavaScript API】APIキーの取得について

Google Maps JavaScript API について

Googleが提供する、Google Maps JavaScript APIを利用することで、GoogleマップやGoogleマイマップの埋め込み地図とは違う、更に多くの機能を使った地図を作ることができます。
Google Maps APIの概要と種類についてではその概要と種類について解説しました。
これから数回に分けて「Google Maps JavaScript API」をメインに解説をしていきたいと思います。


Google Maps JavaScript APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。
ver3(現在のバージョン)は「APIキーが必要」ですが、APIキーが無くてもサイトに地図は表示されていました。
しかし、2016年6月22日から新規サイトでGoogle Mapsを使用する場合は「APIキーが必須」となりました。
APIキーが無いと以下画像のようにマップ部分が
エラーが発生しました。このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。
となり、地図が表示されません。
ブラウザのコンソールでは以下エラーが表示されます。
Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

すべての Google Maps JavaScript API アプリケーションには認証が必要です。
APIの認証がない場合は、Google Maps JavaScript APIは使用できないので注意してください。
それでは、早速、APIキーの取得方法についてみていきましょう。

APIキーの取得方法について

今回は標準プランで使用する場合のAPIキーの取得方法を解説していきます。
Premium Plan ユーザーの方は、Google Maps APIs Premium Plan プロジェクト(Premium Plan を購入した際に作成されたプロジェクト)で設定された APIキーを使用するか、もしくは、APIキーではなく、クライアント IDを使用する方法があります。
詳しくは、 Google Maps APIs Premium Plan のセクションを確認してください。
また、Google Maps JavaScript APIはほとんどのwebサイトで無料で使えますが、大量のトラフィックがあるサイトでは使用量の制限がされ課金される場合があります。
1 日あたり最大 25,000 回のマップロードが無料で、課金が有効である場合、追加のマップロードは 1,000 回あたり $0.50 USD、1 日あたり最大 100,000 回となっています。その辺りも注意しておきましょう。
参考:Goole Maps API 料金とプラン

1Google Maps APIのページへアクセスする
まずはGoogle Maps APIのページへアクセスしましょう。
このページではMaps JavaScript APIの概要、ガイド、リファレンス、サンプル、サポート等APIに関する様々な情報が掲載されています。

APIキーを取得するには、トップページ右上に表示されている「キーの取得」ボタンを選択してください。
※Googleアカウントを持っていない方は、まず「Google アカウントの取得」を行い、ログインした状態で上記ページにアクセスしてください。


2プロジェクトを作成する
「キーの取得」ボタンを選択すると、ポップアップ画面が表示されます。
ここではまず、プロジェクトを作成または選択をします。
過去にプロジェクトを作成したことがない場合は、新規作成のみ可能です。
※このプロヘクトやAPIの管理は、Google Developers Consoleで行うことができます。


プロジェクト名を入力します。
Project names must be between 4 and 30 characters and may only contain letters, numbers, spaces, and hyphens.
(訳:プロジェクト名は4〜30文字で、文字、数字、スペース、ハイフンのみを使用できます。)
任意のプロジェクト名を入力したら「CREATE AND ENABLE API」を選択してください。


3APIキーの発行
「CREATE AND ENABLE API」を選択するとすぐにAPIキーが発行されます。
Google Maps JavaScript APIを利用するためのJavaSctiptのライブラリを読み込む際に、このAPIキーを使用します。
APIキーの右横にあるコピーマークを選択して、APIキーをコピーしておきましょう。


「DONE」を選択すると発行までの手順は終了となりますが、その前にYOUR APIキーの下の注意書きを確認しておきましょう。
To improve your app's security, restrict this key's usage in the API Console.
(訳:アプリのセキュリティを向上させるには、APIコンソールでこのキーの使用を制限します。)
API Consoleへアクセスして、 APIキーの使用を制限する必要があるようですね。
では、使用制限の設定方法についてみていきましょう。

4APIキーの使用制限
API Consoleへアクセスしてください。
※上記発行画面の注意書きリンクAPI Consoleを選択するか、こちらから管理画面に入ります。
先ほど発行したプロヘクトの「認証情報」画面に入ると、APIキーの名前とキーの制限を設定することができます。
名前は管理しやすい名前に変更しておきましょう。


名前の下にある「キーの制限」では、APIキーの使用を制限(他サイトがこのAPIキーを勝手に使えないように設定)することができます。
今回は、ウェブサイトで使うAPIキーを例としますので、「HTTPリファラー」を選択してください。
リファラーに*.example.com*と設定することで、ドメインがexample.com以外のページで、このAPIキーを利用できなくなります。

APIキーでプロジェクトを識別して、割り当てとアクセスが行われます。
割り当ての盗用や不正使用を防止するためにも、 APIキーの取り扱いには十分注意してください。


以上がAPIキーの取得方法となります。
APIの有効、無効の管理は、API Consoleより行うことができますので、合わせて確認しておきましょう。


無効となっている場合は、APIを利用することができません。
必ずGoogle Maps JavaScript APIが「有効」となっている状態であることを確認してから利用しましょう。
では、次回はこのAPIキーを使ってライブラリを読み込んでみましょう。

ご質問などございましたら、お気軽に下記コメント欄にお寄せください。

※当サイトで使用しているコンテンツについて
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾 ブランド利用規約の概要よくある質問の内容をご確認ください。
(※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。)
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google+よりお問い合わせください。