# Google Maps APIをローカル開発環境で使用するときの制限設定方法

URL: https://webrandum.net/google-maps-api-local-restriction/
公開日: 2021-02-25
更新日: 2021-02-25
カテゴリー: コーディング
タグ: Google Maps API
出典: Webrandum（著者: サイトウ マサカズ）

Google Maps APIは使用量に応じて料金が変わってきます。

そんなGoogle Maps APIで1番注意しないといけないのが、APIキーを他の人に使われないためにどうするか？です。

Google Mapsをウェブ上に公開する場合、設定やキーは全てHTMLやJavaScriptファイルから見れてしまうので、制限を設定していないと簡単に他の人に使われてしまい、使っていない分の料金まで請求される可能性があります。

そうならないためにも、制限設定は必須です。

## 制限設定方法

APIキーの作成方法は[過去に記事](https://webrandum.net/google-maps-api/)にしているので、そちらをご覧下さい。

[Google Maps APIを使ってGoogle Mapsをウェブサイトに表示させる方法](https://webrandum.net/google-maps-api)

APIキーの作成が終わった状態で、[Google Cloud Platform](https://console.cloud.google.com/apis/credentials)へアクセスし、サイドバーの［API とサービス］→［認証情報］をクリックします。

![［API とサービス］→［認証情報］](https://webrandum.net/mskz/wp-content/uploads/2021/02/image_1-9.png)

「API キー」に現在利用可能なAPIキーが一覧になっているので、制限をかけたいAPI右側の「Edit API key」をクリックして編集画面へ移動します。

![Edit API Key](https://webrandum.net/mskz/wp-content/uploads/2021/02/image_3-7.png)

### IPアドレスで制限設定

「アプリケーションの制限」で「IP アドレス（ウェブサーバー、cron ジョブなど）」を選択します。

![「IP アドレス（ウェブサーバー、cron ジョブなど）」](https://webrandum.net/mskz/wp-content/uploads/2021/02/image_4-6.png)

あとは「新しいアイテム」内に自分のIPアドレスを追加すればOKです。

![IPアドレスの追加](https://webrandum.net/mskz/wp-content/uploads/2021/02/image_5-4.png)

ちなみに、自分のIPアドレスは[こちらのサイト](https://www.cman.jp/network/support/go_access.cgi)で確認できます。

[アクセス情報【使用中のIPアドレス確認】](https://www.cman.jp/network/support/go_access.cgi)

IPアドレスは定期的に変わってしまうので、実際に実装・開発作業をするときはVPNを使うことになると思いますが、「一時的に確認できればOK」「試しにGoogle Maps APIをローカルで触ってみたいだけ」のような場合は、VPNを使わずそのまま自分のIPアドレスを入力しても良いと思います。

もしIPアドレスが変わってしまった場合は、登録しているIPアドレスを修正すれば問題ありません。

設定できたら1番下の「保存」を押して完了です。

### HTTP リファラーに「localhost」入力はしない

サーバーにアップする場合は「HTTP リファラー」でURLを入力すれば、そのURL以下でしか使用できなくなりますが、ローカル開発環境の場合は特定のURLがないのでそれが使えません。

一応URLに「localhost:xxxx」などlocalhostを入力しても使えますが、それだと関係ない人も同じようにローカル開発環境を作れば使用できてしまいます。

IPアドレスで制限をかけた方が安心・安全です。