【Google Maps Platform】APIの登録をしてGoogle Mapsを表示させる

Geo-location APIs  |  Google Maps Platform  |  Google Cloud
Choose Google Maps Platform to create immersive location experiences and make better business decisions with accurate real-time data & dynamic imagery.

急に地図が表示されなくなってしまいましたので、調べてみたところ、「Google Maps API 無償版のポリシー変更」により、1ヶ月あたりの無料分は200ドル(28,000ロード)となり、それ以上は課金制になりました。

Googleアカウントを取得する

Gmail - Google の無料ストレージとメール
Gmail はすべての Android デバイス、iOS デバイス、パソコンでご利用いただけます。メールの整理、コラボレーション、友だちへの通話を受信トレイから直接行えます。

 

Google APIに登録する

 

Google API Console

利用規約に同意するにチェックを入れ、「同意して続行」をクリックします。

 

スポンサーリンク

 

APIキーを作成する

 

「作成」をクリック。

 

お好みの「プロジェクト名」と「プロジェクトID」を入力し、「作成」をクリック。

 

「APIライブラリ」をクリック。

 

APIライブラリが開きました。

 

マップの「Maps JavaScript API」をクリックします。

 

「有効にする」をクリック。

 

次の画面で、タブ「認証情報」→「APIとサービスの認証情報」をクリック。

 

「認証情報を作成」をクリック。

 

「APIキー」をクリック。

 

APIキーが作成されました。

 

APIキーの不正利用を防ぐ

 

不正利用を防ぐため「キーを制限」をクリックして設定します。

 

「アプリケーションの制限」で「HTTPリファラー(ウェブサイト)」を選択します。

次に、「ウェブサイトの制限」で末尾にアスタリスク*を入れたサイトURLを入力し、「保存」をクリックします。

 

APIキーを確認して「HTTPリファラー」をなっていれば設定完了です。

 

APIは12個まで設定可能

 

Google API Console→「作成」をクリック

手順は最初に作成したのと同様です。

  1. お好みのプロジェクト名を記載→「作成」
  2. ダッシュボードに移動し「APIとサービスを有効化」をクリック
  3. Google API Console→認証情報→認証情報を作成→APIキー作成
  4. キーを制限→「HTTPリファラー」を確認

 

サイトに指定する

 

</body>タグの上に設置します。

<script src="https://maps.googleapis.com/maps/api/js?key=【APIキー】"></script>

もしくは<header>や<footer>でも大丈夫だと思います。

後述しますが、設定したらテストしてみてください。

 

上限を設定する

 

1ヶ月200ドルまで無料になり、約28000回のGoogleマップを表示することができます。

マップ、ルート、プレイスの 料金設定

それ以降は課金されますので(1回約0.007ドル)、課金が嫌な場合はあらかじめ上限を設定しておくと安心です。

Google Clpud Platform」→API→Maps JavaScript API→割り当て

右側の鉛筆のマークをクリックして上限を変更します。

  • Map loads per day「1日のロード数」
  • Map loads per 100 seconds 「100秒あたりのロード数」
  • Map loads per 100 seconds per user 「100秒あたりの1ユーザーのロード数」

 

APIの動作確認

 

Chromeの拡張機能「Google Maps Platform API Checker」が便利です。

 

後書き

 

ついでに、マップのAPI、15個全てを「有効」に設定しておくと後々便利かと思います。