Google Map API のキーの取得とサンプルコードを入手する方法


[初回公開] 2007.02.08

以前は Google アカウントがあれば無料で誰でも利用できていた Google Map API だが、2018 年に Google Maps Platform にサービス移行してから Google アカウントにクレジットカードの紐づけが必要となり API キーの取得方法が異なるようになったためキーの取得方法を紹介する。

Google Map API のキーの取得とサンプルコードを入手する方法




1.Google Maps Platform とは


Google Maps Platform とは


Google Maps Platform とは 2018年06月に Google Map に関連する地図サービスを全て一つの Google アカウントで管理できるように統合されたもので、それ以前は JavaScript 版や Static 版などそれぞれで API キーを取得していたものが、Google Maps Platform により認証で利用する API キーの管理から利用する API の有効と無効も簡単に行うことができ、API の利用状況もグラフ化して確認できるようになった。

2.Google Maps Platform と旧 Goole Map API の違い


Google Maps Platform と旧 Goole Map API の違いとしては、旧 Goole Map API ではバラバラだった地図サービスに関連する API が Google Maps Platform により統合管理できるようになった点と、旧 Goole Map API で利用していた無償版の API キーは利用できなくなり、2018年06月の Google Maps Platform 移行の後は地図を表示しようとすると警告文が表示されて利用できなくなった。
これは Google Maps Platform から Google アカウントにクレジット番号の紐づけを義務づけたことにあり、旧 Goole Map API の有償版を利用しているユーザは既に支払い登録ができているので API キーの変更をすることなく継続して利用できるようになっている。
また、JavaScript 版の Google Map など地図の表示や操作に必要な関数類は Google Maps Platform になっても引き継がれているため、API キーのみ変更すればプログラムの変更無しで継続して利用することができる。



3.Google Maps Platform の無料体験版に申し込む


Google Maps Platform は利用する Google アカウントにクレジット番号の紐づけが必要になったものの、月額 $200 分までは無料で利用することができ、地図を表示するだけなら月に 28,000 回までは無償枠で収まり、それを超えたものは 1,000 回を超えるごとに $7 の重量課金となり登録しているクレジット番号に請求が来る。
もちろん、無料枠を超えないように Google Maps Platform 内で制限を設定することができ、設定値に利用が達すると自動的に利用できなくなり従量課金されないようになる。

ここからは実際に Google Maps Platform の無料体験版に登録してみる。
登録にあたり、事前に Google アカウントを登録しており、Google Maps Platform にログインしているものとして開始する。

Google Maps Platform 無料体験版に登録するステップ1


まずステップ1として利用規約の確認と最新情報をメールで受け取るかのチェックを行う。
利用規約にチェックを入れるのは必須となり、最新情報の通知は任意の選択となり、最後にボタン「続行」をクリックする。

Google Maps Platform 無料体験版に登録するステップ2


次に登録のステップ2では Google アカウント登録時の情報が表示され、支払い方法を入力する。
「カードの種類」を選択するとクレジット番号や有効期限を入力する欄が表示され、入力を終えればボタン「無料トライアルを開始」をクリックすることで利用する準備が整う。

4.利用する Google Map サービスを選択し有効化する


Google Maps に関連する API の一部


Google Maps Platform が利用できるようになると、次は提供されている Google 地図サービスのどれを利用するか選択する。
Google Map と言ってもスマートフォンのアプリに利用する「Maps SDK for Android」や指定する地点の周辺情報を取得する「Places API」など 20 以上の機能がある。
よく利用されているのはウェブサイト内に Google Map を埋め込む「Maps JavaScript API」なので、今回はこれを有効化する。

Google Map に関連する API を表示するためには「Google Maps Platform」からでも「Google Cloud Platform」からでもどちらの画面からログインしてもログイン後は「Google Cloud Platform」が表示されるが、「Google Maps Platform」からログインした方が Google Map に関連した API だけが表示されたダッシュボードが表示されるので手間が軽減できる。

Google Maps Platform のダッシュボードから API とサービスを選択


ログインして「Google Maps Platform」が表示されれば、左メニューより「API とサービス -> ライブラリ」を選択すると、上図のように「API ライブラリへようこそ」が表示されるので、その中から「Maps JavaScript API」をクリックする。

Maps JavaScript API を有効化する


「Maps JavaScript API」を選択すると Maps JavaScript API の概要やドキュメントへのリンクが表示される。
上図では既に API が有効になっている状態だが、ボタン「有効化」をクリックすると API が利用できる状態となり、ボタン名が「管理」に変更する・



5.Map JavaScript API のキーを取得する


API を利用するための API キーの取得


Maps JavaScript API を有効化しただけではまだ API を利用することはできず認証情報となる API キーを取得する必要があり、この API キーをプログラム内に埋め込むことで初めて地図が正常に動作する。

前項のボタン「管理」をクリックすると認証情報の画面が表示され、画面上部の「API のサービスの認証情報」をクリックすると API が自動的に発行される。
発行された API キーは一覧に表示され、キーの欄にあるコピーマークをクリックするとクリップボード上(パソコン上の一次メモリ)にコピーされるので貼り付けて利用することができる。

6.Map JavaScript API のサンプルコードを取得する


Maps JavaScript API のサンプルコードの入手


API キーを取得できれば、後は Google Map のチュートリアルやドキュメントを見ながらプログラムして望む地図サービスを組み上げていく。
基本形となるサンプルのコードは Google Cloud Platform にログインした状態で左メニューより「API とサービス -> ライブラリ」を選択し、Map JavaScript API をクリックした画面内から「ドキュメント」選択するサンプルコードが表示される。
ドキュメントの左メニューには各種関数の一覧があるため、Google Map のバージョンアップにより機能追加された場合は新たに説明書として追加されていくので自身が知らない Google Map の使い方の知識が広がるだろう。

7.Google Maps Platform 以前の API キーの取得の方法


最後に今では利用できないが Google Maps Platform に統合される前の旧 Google Map API の取得方法も紹介する。
旧 Google Map API のまままだ公開されていたり、過去の API の取得方法を確認したいときに参照してほしい。

Google アカウントの取得


旧 Google Map の API キーを取得するためにも Google アカウントは必要となるため、まず Google アカウントを取得する。

Google Maps のサイトにアクセス


次にログインした状態で、Google Maps のサイト(現在は閉鎖 にアクセスすると Google Map を利用するためのキーを発行するサイトが表示される。

Google Maps の同意画面と利用するサイト URL の入力


「Sign up for a Google Maps API key」をクリックすると同意画面が表示され、同時に Google Map を利用する URL を入力する欄が表示されるので URL を入力する。

API キーとサンプルコードの表示


URL を入力すると API キーとサンプルコードが表示されるのでこれらをコピーして HTML ファイルに貼り付けてブラウザで表示すると地図が表示されるのが確認できる。

サンプルマップの表示


あくまでサンプルのため、初期表示される場所はアメリカで、地図を拡大縮小するスライダーなど何もない状態なのでここから必要な機能を追加する流れとなる。

関連記事


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック