GoogleマップのAPIキーをGoogle Maps Platformから取得する

##目的
これまでにAPIキーを取得したことのない人が、Maps JavaScript APIを使用してウェブサイトにGoogleマップを表示するために必要なAPIキーを取得することを目的とします。

##事前準備
Google Chromeを起動し、[Googleアカウントにログイン](https://myaccount.google.com/intro?hl=ja)しておきます。

Google Chrome以外のブラウザでは手順をうまく進められない場合があります。
Google Chromeがインストールされていない場合は下記のページからインストールしてください。
https://support.google.com/chrome/answer/95346?hl=ja

Googleアカウントを持っていない方は下記のページから作成してください。
https://support.google.com/accounts/answer/27441?hl=ja


##APIキー取得手順

###１．スタート
[Google Maps Platform](https://cloud.google.com/maps-platform/)を開いて、`使ってみる`をクリックします。
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/fada1255-954a-4384-8f72-833acc2b9851.jpeg)

###２．プロダクトを選択
`マップ`にチェックを入れ、`続行`をクリックします。
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/f0dcb66e-e4af-6024-de25-55daf25cf84b.jpeg)

###３．プロジェクトを選択
プロジェクト名（サイト名など）を入力し、規約に同意するために`Yes`を選択して、`NEXT`をクリックします。
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/b9f7589c-1922-1854-5730-9c24910c3532.jpeg)

###４．請求先アカウント作成
`請求先アカウントの作成`をクリックします。
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/0d47d634-225d-7893-f346-c77ddf112346.jpeg)

`名前`と`国`を入力して`続行`をクリックします。
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/5bb5e8e3-84f1-c39a-ab02-a87bc14526db.jpeg)

`利用規約`の`同意します`にチェックを入れ、`続行`をクリックします。
![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/4147961a-50a6-e04b-2909-152eb8d14897.jpeg)

`アカウントの種類`、`名前と住所`、`メインの連絡先`、`お支払い方法`を入力し、`無料トライアルを開始`をクリックします。
![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/c285d7b8-70e8-0501-d05f-53adc826c50d.jpeg)

###５．Google Maps Platform の有効化
`次へ`をクリックします。
![8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/ae7a6bbc-a488-9799-e0f3-2c2ca0b5cca1.jpeg)

APIキーが生成されました。
アイコンをクリックしてコピーし、どこかにメモしておきます。
さらに詳細な設定を行うため、`API Console`をクリックします。
![9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/b00861ae-6a83-27d9-3244-a8e9b4556804.jpeg)

###６．APIキーの設定
`名前`を適宜変更します（サイト名、ページ名など）。

次に`アプリケーションの制限`を設定します。
`HTTPリファラー（ウェブサイト）`を選択し、ウェブサイトのURLに`*`を付けたものを入力します（例：https\://example.com/*）。

次に`APIの制限`を設定します。
`キーを制限`を選択し、`Maps JavaScript API`を選択します。

最後に`保存`をクリックします。
![10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/24b3ea2e-940a-1ae1-5285-edc63d715739.jpeg)

###７．割り当て上限の設定
`ダッシュボード`を表示し、`Maps JavaScript API`をクリックします。
![11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/5bce66f1-8903-b8fc-3070-e8526204d101.jpeg)

`割り当て`を表示し、`Map loads per day`の鉛筆アイコンをクリックします。
![12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/921476d2-1c8a-b26a-70fa-94008ef91c3f.jpeg)

割り当て量を入力して`保存`をクリックします。
![13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72570/77c0af34-5af7-da4a-373d-f2f57181d783.jpeg)

####割り当て上限の決め方
まずGoogle Maps Platformの料金体系について知っておきましょう。
https://cloud.google.com/maps-platform/pricing/sheet/?hl=ja
Maps JavaScript APIを使用した地図の表示は`Dynamic Maps`にあたります。
月間使用量100,000回までは1,000回あたり\$7、
100,001回から500,000回までは1,000回あたり\$5.6の料金が発生しますが、
毎月\$200分（最大28,000読み込み）は無料で利用できると記載されています。

無料枠の28,000回を１日あたりに換算すると約900回となります。
ですので、`Map loads per day`の上限を`900`に設定しておけば課金は発生しないはずです。
ただ読み込み回数が上限を超えてしまうとGoogleマップが正常に表示されなくなってしまいます。
ここはサイト訪問者の利便性を考慮して、支払うことのできる上限額を決めて、思わぬ高額請求を防ぐ目的で設定しましょう。

\$100までの課金する場合
(\$100 + \$200) ÷ \$7 × 1000回 ÷ 31日 ≒ 1380

\$500までの課金する場合
(\$500 + \$200) ÷ \$7 × 1000回 ÷ 31日 ≒ 3220

※ 上記の数値はMaps JavaScript APIのみを使用することを想定したものです

##完了
以上で完了です。