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

Google Maps APIは使用量に応じて料金が変わってきます。
そんなGoogle Maps APIで1番注意しないといけないのが、APIキーを他の人に使われないためにどうするか？です。

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

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

制限設定方法

APIキーの作成方法は過去に記事にしているので、そちらをご覧下さい。

Webrandum

Google Maps APIを使ってGoogle Mapsをウェブサイトに表示させる方法

https://webrandum.net/google-maps-api

ウェブサイトにGoogle Mapsを埋め込んで、自分好みにカスタマイズしたい場合は「Google Maps API」を使う必要があります。今回はこのGoogle Maps APIの取得方法から、ウェブサイト上に表示させるところまでの流れをまとめておきます。Google Maps APIの料金プラン2018年7月16日以前は、無料版と有料版に分かれていて、最低限の機能は無料版で、それ以上のカスタマイズがしたい場合は有料版を使う必要がありました。しかし、2018年7月16日以降はそれが統合され、「Google Maps Platform」という1つのサービスになりました。そして料金形...

APIキーの作成が終わった状態で、Google Cloud Platformへアクセスし、サイドバーの［API とサービス］→［認証情報］をクリックします。

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

IPアドレスで制限設定

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

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

ちなみに、自分のIPアドレスはこちらのサイトで確認できます。

www.cman.jp

アクセス情報【使用中のIPアドレス確認】

https://www.cman.jp/network/support/go_access.cgi

あなたのアクセスしているIPアドレス情報などをENVとJavaScriptで取得し表示します。あなたのIPアドレスからポート疎通・ping疎通・DNS索引・WHOIS情報も取得できます。

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

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

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

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

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

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

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