はじめに
Google Maps を Web アプリケーションに組み込む場合、Maps JavaScript API と API キーが必要になります。この API は設定を誤るとキーを悪用され、高額な課金が発生するリスクがあります。
本記事では、Maps JavaScript API をできるだけ無料枠内で安全に運用するために最低限必要な設定をご紹介します。
背景
Google Maps を表示する Web ページを公開するにあたり、API キーをそのまま使うのは危険だということを知りました。クライアント側で動作する API のため、キーは必然的に公開されます。そのため公開されても問題ない状態にするための設定が重要になります。
なお、今回対象としている Web アプリは、Deck.gl の学習を兼ねて作成した Google タイムラインをブラウザ上で可視化するアプリです。
Maps JavaScript API とは
Maps JavaScript API はクライアントサイド ウェブ API です。世界中のあらゆる場所を表示する地図を作成したり、独自のカスタム グラフィック、アニメーション、インタラクティブなカスタム データレイヤを追加したりできるほか、Maps JavaScript API の Places API を使用して位置認識対象物を作成することもできます。
Maps JavaScript API は、Google Cloud Platform（GCP）で提供されている API の一つで、以下のような制御を可能にします。
- 地図の表示
- マーカーやオーバーレイの追加
- 動的な描画やアニメーション
- Places API と連携した地点情報の取得
単なる「地図画像の表示」だけであれば API は不要ですが、インタラクティブな操作や描画制御を行う場合には必須となります。
API キーとは
API キーは、GCP 上の API を利用するための認証情報です。キーごとに以下のような制限を設定できます。
- 使用できるアプリケーション
- 呼び出せる API
通常、API キーはサーバー側で非公開に管理しますが、Maps JavaScript API はクライアント側で動作するため、キーが必ず公開されるという特性があります。
そのため Maps 系 API では、アクセス制限の設定が必須となります。
開発環境と本番環境で API キーを分ける
Maps JavaScript API では、環境ごとに適切な制限内容が異なるため、開発環境用と本番環境用で API キーを分けて管理する必要があります。
キーを分けることで、開発環境では localhost のみを許可し、本番環境では公開サイトの URL のみに制限するといった運用が可能です。
無料枠で安全に運用するために必要な設定
Maps JavaScript API を無料枠で運用するためには、最低限以下の 3 つの設定が必要です。
- アプリケーション制限（利用可能な Web サイトの制限）
- API の制限（利用可能な API の制限）
- 使用量制限（クォータ設定）
以下、それぞれについて説明します。
アプリケーション制限（ウェブサイト制限）
まず、API キーを使用できる Web サイトを限定します。これにより、第三者がキーをコピーして別サイトで使用することを防げます。
設定手順
GCP のプロジェクトページ > 全てのプロダクトを表示 > Google Maps Platform > 鍵と認証情報 > API キーを選択
API の制限
次に、API キーで呼び出せる API を限定します。Maps JavaScript API だけを使うのであれば、それ以外の API はすべて無効化します。これにより、同じキーを使って Places API や他の Maps API を勝手に呼ばれることを防げます。
設定手順
GCP のプロジェクトページ > 全てのプロダクトを表示 > Google Maps Platform > 鍵と認証情報 > API キーを選択
使用量制限
最後に、API 自体の使用量を制限します。これは API キー単位ではなく、API 単位の設定になります。
無料枠の確認
まず、以下のページで Maps JavaScript API の無料枠（Free Usage Cap） を確認します。
2025年12月現在であれば無料枠は 10,000 イベントとなっています。
設定手順
月間無料枠 ÷ 31 ≒ 1 日あたりの上限とし、その値を Maps loads per day に設定します。不要な項目はすべて 0 に設定を設定しておきます。
GCP のプロジェクトページ > 全てのプロダクトを表示 > Google Maps Platform > 割り当て > Maps Javascript API
まとめ
以上の設定を行うことで、
- API キーが悪用されるリスクの最小化
- 無料枠を超過して課金される事故の防止
といった状態を作ることができます。
Maps 系 API は非常に便利ですが、初期設定を怠ると危険です。Web アプリを公開する前に、必ずこれらの制限を設定することをおすすめします。