BLOG

ブログ

2024年2月2日

【意外と簡単】Google Maps APIキーの取得・導入【APIキーの取得編】

今回、Google API初心者の私がサイトに載ってるGoogleマップをカスタマイズすべく、初めてGoogle mapのAPIを導入してみました。

【ステップ1】Google Cloud Platformにアクセス

Google Maps APIを利用するためにまずはAPIキーの取得をします。

Google Cloud Platformにアクセス。
アクセスしたらコンソールをクリック。

【ステップ2】プロジェクトの作成

左上のプロジェクトの選択をクリック。→右上の新しいプロジェクトをクリック。→ここでプロジェクト名を入力します。

【ステップ3】APIの有効化

プロジェクトが作成できたら、プロジェクトを選択した状態で使いたいAPIを有効化します。
左上メニューの「APIとサービス」をクリック。→今回使いたいAPI「maps javascript api」と入力し検索します。→選んだら「有効にする」をクリック。

念の為有効になってるか確認をします。

左上メニューから「APIとサービス」→「有効なAPIとサービス」をクリック。
「フィルタ」に有効にしたmaps javascript apiを入れます。
出てきたAPIをクリックし、「ENABLED（有効）」に入っていればOK。

【ステップ4】キーの取得

メニューの「鍵と認証情報」をクリック。
→使用したいAPIの「鍵を表示します」をクリック。
表示されたキーをコピーしてキーの取得は完了です。
ですが、このままではキーの制限が付いてなく、安全ではないので制限をかけます。操作の3点マークをクリックし、「APIキーを修正」

今回は自社HPで使用するGoogleマップに変更を加えるので、
「アプリケーションの制限の設定」は「ウェブサイト」、
「ウェブサイトの制限」で表示したいウェブサイト（IPアドレス）を追加します。
今回は「maps javascript api」しか使用しないため「APIの制限」で「キーを制限」にチェック。→保存

これでキーの発行、取得は終了です。

【番外編】1日の使用量を制限

Google Maps Platform には、1日あたりのリクエスト数（マップのロード回数）や課金額に上限を設ける機能が用意されており、使用量が予想以上に増加した場合に備え、1日の使用量の上限を設定できます。
今回使用したGoogle Maps JavaScript APIは、1ヶ月に28,000回までロードが可能です。（無料で利用できる回数）※2023年11月現在

「APIとサービス」をクリック。「javascript」でフィルターをかけ該当APIをクリック。
「割り当て」をクリック。編集アイコンをクリックし割り当て上限を入れます。（28,000回÷31日=903回）

詳しくはこちら