原則としてGoogle Cloud Platform（GCP）を使用して説明する
ログインしたサイトの構成は当記事の記述順と合致していない
時々ページを見失った時は、GCP内の検索を使ってページを探してください
１．API キーの取得
・Google Cloud Platform ConsoleからGCPにログインする
事前に地図作成用のGoogleアカウントを取得してておく
さらに認証用の情報としてクレジットカードを用意する
原則有料、使用量が少なければゼロ円で請求される
GCPに取得済みのアカウントでログインする
・GCPに入手したアカウントで登録を行う
登録アカウントの種類を問われたら「個人」を指定する
支払い方法を問われたら「クレジットカード」を利用にする
GCPの使用は従量制の有料、月末精算となっている
使用量が制限内であれば、金額０円の請求書が月末に届く
＊制限内容については後段で記述する
・プロジェクトを作成する
「プロジェクトの選択」をクリック
「新しいプロジェクト」をクリック
名称をセットし、「作成」をクリックして登録する
・Maps JavaScript APIを有効にする
「ようこそ」画面に入る（先頭画面に戻ると分かりやすい）
クイックアクセス部分の「APIとサービス」をクリック
「APIとサービスを有効にする」をクリック
「APIライブラリーへようこそ」画面の「Maps JavaScript API」をクリック
APIの利用が有効なことを確認する
・APIキーの作成
「APIとサービス」画面の「認証情報」をクリック
「認証情報」画面で
新規に作成の場合・・・「認証情報作成」をクリック
※今回は作成済みのキーを確認する
・APIキーの使用に制限を設定する
APIキーの作成が確認できたら、続けてAPIキーの使用に制限を設ける
外部にキー情報が洩れると悪意のあるユーザに利用される恐れがある
「認証情報」画面の「APIキー１」をクリック（複数あれば選択する）
「APIキーを編集」画面でキーの制限を行う
アプリケーションの制限
HTTPリファラー（ウェブサイト）・・HTTPリファラーによる制限
IPアドレス（ウェブサーバー）・・IPアドレスによる制限
Androidアプリ・・パッケージ名＆フィンガープリントによる制限
iOSアプリ・・iOSハンドル識別子による制限
ウェブサイトの制限
「HTTPリファラー」を選択した場合に指定する
指定しないと、全てのサイトからAPIキーが使用できる
APIの制限
「キーを制限しない」を選択する
制限しないと、任意のAPIを呼び出すことが可能になる
２．Maps JavaScript API の読み込み
作成したAPIキーをHTMLファイルに組み込みパラメータとして含める
「YOUR_API_KEY」の部分を作成したAPIキーで置き換える
<script async defer src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap" type="text/javascript">
</script>３．地図の表示
JavaScriptコードで地図を初期化し、表示する基本的な方法が示されています
４．マーカーの追加
地図上にマーカーを配置する方法、基本的なマーカーの追加から、カスタムアイコンの使用まで解説されています
５．使用量の管理と制限
予期しない費用に気付けるよう、
ある程度のクレジットを消費した時点でアラートを示す設定を施す
・予算を設定する
「ようこそ」画面に入る（先頭画面に戻ると分かりやすい）
「課金」をクリック
「予算とアラート」をクリック、続けて「予算を作成」をクリック
「予算作成」の画面で（設定内容は任意）
範囲として、名称・期間を設定する
期間として、予算タイプ・目標金額を設定する
操作として、閾値（境界値）を設定する
通知として、メールを設定する
最後に「終了」をクリックする
最後に「予算とアラート」の画面に戻ったところで、
予算につけた名前をクリックし、もう一度設定内容を確認する
 ようこそ画面 |  予算作成画面 |  予算の設定 |
 確認画面 |