Directions API（Google Maps Platform）のセットアップとテスト

# はじめに
Google Maps Platform の Directions API を使うための準備について投稿します。初期設定～ブラウザでのテストまでを記載しています。

:::note warn
2022年6月時点の情報になります。
:::

# Google Maps Platform とは
GoogleマップのAPI群です。カスタマイズしたマップの埋め込みや距離の取得など、Googleマップの情報を様々に応用できるサービスです。

https://mapsplatform.google.com/

### 料金
1つのアカウントにつき、月$200までは無料で利用できます。その上限を超えると、使った分だけ料金が請求されます。

https://mapsplatform.google.com/pricing/

# セットアップ方法
流れは以下の通りです。
1. Google Cloud Platformへのログイン
1. プロジェクトの作成
1. 請求先アカウントの作成
1. APIキーの発行

公式スタートガイドはこちらです。

https://developers.google.com/maps/gmp-get-started?hl=ja#create-project

## Google Cloud Platform へのログイン
以下にアクセスします。

https://mapsplatform.google.com/

「使ってみる」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/7871d6db-8232-65c8-5499-c0136d8aa7f2.png)

Googleアカウントでログイン。もしアカウントがなければ新規作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/e00d0b9f-cccc-a2a8-f55e-3b65775ff576.png)


利用規約に同意します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/f5199f8b-2910-362e-4344-9cf3f9eced4a.png)

## プロジェクトの作成
最初は「My First Project」というプロジェクトが自動で作成されます。プロジェクト単位でAPIを管理することができ、新たに作ることもできます。ここでは「My First Project」を使用していきます。

## 請求先アカウントの作成（課金の有効化）
最初は無料トライアルを始める、という形になります。

:::note info
無料トライアルを含め、APIを利用するためには請求先を登録する必要がありますが、この時点ですぐに課金されることはありません。
:::

「請求先アカウントを作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/c133958a-7733-2860-2fe6-72dc013fffdd.png)

1/3　画面の指示に従って進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/defd77ff-0f5c-9cfa-ff1d-12cd7f4e8b6a.png)

2/3
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/1dff1752-cdcd-64e7-75b0-02d10206c1a0.png)

3/3　最後に支払い情報を登録します。カード情報を入力すると住所入力欄も表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/0b8f6dfe-8fe2-ff82-72a2-2030d04aee2b.png)

## APIキーの発行
続いて実際にAPIを使えるようにしていきます。初回に画像のポップアップが出ると思います。黒く塗ってある部分がAPIキー（後述）です。

「デモを作成」をクリックして先に進みます。
![APIkey.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/bae07fea-628c-2f78-ce9e-206952e7e7a7.png)
APIキーの保護（後述）はいったん「後で」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/001887b5-b00e-9997-530f-3c5edd86f590.png)
以下のメッセージが出れば準備完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/e1fb6298-b056-b41f-9891-49131dfff9b7.png)

:::note
とりあえずテストしてみたい場合は、[こちらの項目](#テスト)に飛んでください。
:::

## APIキーとは
APIを利用するアカウントを識別する一意の文字列です。APIを呼び出す際のリクエストにこのキーを必ず含める必要があり、これをもとに使用量が集計され課金されます。単なる文字列のため呼び出し元等を制限しないと、第三者からの不正利用を許してしまいます。そのため、上記でAPIキーの保護を推奨するポップアップがありました。

### APIキーの保護① アプリケーションの制限
試しに呼び出し元を自分のIPアドレスで制限してみましょう。制限することで、そのIPアドレスからしかAPIを呼び出せなくなります。

:::note warn
IPアドレスでの制限は、IPアドレスが変わる度に以下の設定が必要になります
:::

コンソールの「認証情報」をクリックすると発行されたAPIキーが確認できます。右側の鉛筆マークをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/dddfdb0a-3acb-4176-415a-5d55f77dd3b7.png)

以下の編集画面に移動したら、「アプリケーションの制限」で「IPアドレス」を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/f6242b01-3cbf-0fa5-4978-8169547799e3.png)

「項目を追加」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/a411ddfd-d067-cd0a-c25a-df17fa79d274.png)

自分のIPアドレスを入力して「完了」をクリックします。IPアドレスは[こちらのようなサービス](https://www.cman.jp/network/support/go_access.cgi)で調べられます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/a6bf89fd-45b3-a24e-9329-f0f899c15456.png)
以上でIPアドレスによる制限は完了です。

### APIキーの保護② APIの制限
APIキーで呼び出せるAPIを限定しておく設定です。Directions API のみを呼び出せるようにしてみます。

先ほどのIPアドレスの入力欄の下に「APIの制限」がありますので、「キーを制限」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/94a16896-e019-bcde-fb84-d0a9a7759346.png)

その下のプルダウンメニューで「Directions API」にチェックを付け、「OK」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/22193521-ec65-8b68-1722-2c0a25b965ab.png)

以下の表示になったら、「保存」をクリックして完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/a33102d3-39ce-50da-7cd6-8f293dbc45e0.png)


### 詳細
APIキーの保護については、以下でより詳しく解説されています。

https://developers.google.com/maps/api-security-best-practices?hl=ja

## 使用量の制限
誤って大量のリクエストをして多額の料金が請求されないように、APIの使用量（リクエスト数）の上限を設定しておきます。

Directions API を無料枠\\$200内で済ませる場合、リクエスト1,000回あたり$5（[料金表](https://developers.google.com/maps/billing/gmp-billing?_gl=1*1hlyyde*_ga*ODgwMjQ0MTI1LjE2NDExMjk2NDM.*_ga_NRWSTWS78N*MTY1NTUzNzg0MS41LjEuMTY1NTUzODAyMS4w#directions
)）なので、1日あたりのリクエスト上限は1,290回（=40,000÷31）になります。

設定は「割り当て」タブから行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/1dbce0df-9d82-8000-f5e7-868cd9b41bb8.png)
「Requests」を展開し、「Requests /日」の鉛筆マークをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/54b1ae21-1f77-3d08-08f5-dea526057373.png)
割り当て上限の「無制限」からチェックを外し、上限値を入力します。もし画面のような注意書きが出たら、「確認」にチェックを入れて保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/fead1ad8-bbca-27b3-5244-dca579ed6920.png)
以上で使用量の制限がかかりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018273/b05920ea-e94c-373c-f357-5ab37b576e3c.png)


# テスト
準備が完了しましたので、いよいよブラウザでテストしてみます。

## リクエスト形式

形式は次の通りです。
```text
https://maps.googleapis.com/maps/api/directions/outputFormat?parameters
``` 

ベースのURLは`https://maps.googleapis.com/maps/api/directions/`で、結果の受け取り方（json/xml）を`outputFomat`で指定します。`parameters`部分がリクエストパラメータ（具体的な要求内容）です。

必須パラメータは以下3点です。
| パラメータ名 | 内容 |
|:-:|:-:|
| origin  | 出発地  |
| destination  | 目的地  |
| key  | APIキー  |

他にもたくさんのパラメータがあります。公式ドキュメントはこちらです。

https://developers.google.com/maps/documentation/directions/get-directions?hl=ja

## テスト実行
試しに札幌駅から新千歳空港までの自動車走行距離をJSONで取得してみましょう。

メモ帳などのテキストエディタを開き、次のURLをコピペします。 

```text
https://maps.googleapis.com/maps/api/directions/json?origin=札幌駅&destination=新千歳空港&key=YOUR_API_KEY
```

最後の **YOUR_API_KEY** を自身のAPIキーに置き換えてください。置き換えたら、ブラウザの検索窓にコピペしてEnterしてみます。以下のような長いJSONがブラウザに表示され、最後の`status`が`OK`ならテストは成功です！

```JSON
{
  "geocoded_waypoints": [
    {
      "geocoder_status": "OK",
      "place_id": "ChIJA_nD0nQpC18RpUdK3Yyx4qU",
      "types": [
        "establishment",
        "point_of_interest",
        "train_station",
        "transit_station"
      ]
    },
    {
      "geocoder_status": "OK",
      "place_id": "ChIJ3RpcnUUgdV8R9oH25Xxguho",
      "types": [

　　...（略）...

  ],
  "status": "OK"
}
```