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

Google Maps APIは使用量に応じて料金が変わってきます。
そんなGoogle Maps APIで1番注意しないといけないのが、APIキーを他の人に使われないためにどうするか?です。
Google Mapsをウェブ上に公開する場合、設定やキーは全てHTMLやJavaScriptファイルから見れてしまうので、制限を設定していないと簡単に他の人に使われてしまい、使っていない分の料金まで請求される可能性があります。
そうならないためにも、制限設定は必須です。
制限設定方法
APIキーの作成方法は過去に記事にしているので、そちらをご覧下さい。
APIキーの作成が終わった状態で、Google Cloud Platformへアクセスし、サイドバーの[API とサービス]→[認証情報]をクリックします。
![[API とサービス]→[認証情報]](https://webrandum.net/mskz/wp-content/uploads/2021/02/image_1-9.png)
「API キー」に現在利用可能なAPIキーが一覧になっているので、制限をかけたいAPI右側の「Edit API key」をクリックして編集画面へ移動します。

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

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

ちなみに、自分のIPアドレスはこちらのサイトで確認できます。
IPアドレスは定期的に変わってしまうので、実際に実装・開発作業をするときはVPNを使うことになると思いますが、「一時的に確認できればOK」「試しにGoogle Maps APIをローカルで触ってみたいだけ」のような場合は、VPNを使わずそのまま自分のIPアドレスを入力しても良いと思います。
もしIPアドレスが変わってしまった場合は、登録しているIPアドレスを修正すれば問題ありません。
設定できたら1番下の「保存」を押して完了です。
HTTP リファラーに「localhost」入力はしない
サーバーにアップする場合は「HTTP リファラー」でURLを入力すれば、そのURL以下でしか使用できなくなりますが、ローカル開発環境の場合は特定のURLがないのでそれが使えません。
一応URLに「localhost:xxxx」などlocalhostを入力しても使えますが、それだと関係ない人も同じようにローカル開発環境を作れば使用できてしまいます。
IPアドレスで制限をかけた方が安心・安全です。


ウェブサイト上で簡単にWYSIWYGエディタを実装する「TinyMCE」
CSS疑似要素(::beforeや::after)のcontent内で改行したり半角スペースを複数入力する方法
アイコンフォントをPCにインストールしている場合は、コーディング後の確認に注意
Google Maps APIでピンの見た目をカスタマイズする方法
Movable TypeでAssetURLやEntryPermalink・ContentPermalinkで出力されるパスを絶対パスから相対パスに変える
SafariでFacebookのPage Pluginに「リクエストを処理できませんでした」とダイアログが表示される問題
選択テキストをHTMLタグですぐ囲めるようになるVisual Studio Code拡張機能「htmltagwrap」
WordPressのメディアライブラリで画像を追加するときに表示される「HTTP エラー」の解消方法
WordPressでショートコードを作成する方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
複数サービスを1つのアプリで管理できるStationの通知設定
JavaScriptのtest関数と正規表現でバリデーションチェックを行う
備忘録として自分のした事をまとめるブログを始めました – ブログ作成の経緯と方向性
ポモドーロテクニックの起動し忘れを防止するために仕事開始時にメッセージを表示させたり工夫をする
Alfredと1Password 8を連携するWorkflowの設定方法
Ulysses編集画面の画像プレビューが小さすぎる場合の対処法
Alfredと1Passwordの連携をもっと便利に使いこなすための1Passwordのカテゴリ管理方法
M1 MacのHomebrewでのインストール時に「Cannot install under Rosetta 2 in ARM default prefix (/opt/homebrew)!」エラーが出る場合の解決法
Path Finderのデュアルブラウザで、別枠へのファイル移動とコピーを使いやすくする
Fantasticalの月間カレンダーは3段にして使うのがオススメ!