GoogleMapAPIを使おうとググったところ、Google Cloud Platform導入後の設定方法がわかりにくかったので、登録しながら記事にしてみました。どうなることでしょう。ワクワク💕(^^)
こちらのサイトを参考にしつつ、進めていきます。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9R29vZ2xlJTIwTWFwcyUyMEFQSSUyMCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZDJkM2ZhYjRhNmExOTU3MDUyYjQyMzBlMjc4MTk5ODk&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBIYXJ1a2EtT2dhd2EmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFmNTk1NzU4ODA1MTA4ZTVkYjNhODZjYzhjM2JiNWY1&blend-x=142&blend-y=486&blend-mode=normal&s=69a796b4e3dac0f0fcf7b413bec6d405)
GoogleアカウントでログインしてGoogle Cloud Platform にアクセス
表題のとおりです。Google Cloud Platformのリンクはこちら。
![](https://cloud.google.com/_static/cloud/images/social-icon-google-cloud-1200-630.png)
リンクをクリックすると、右上に「コンソール」が表示されます。ここをクリック。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-1024x97.png)
すると、「利用規約に同意」のポップアップが開きます。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-3.png)
2箇所チェックして「同意して続行」をクリック。
Google Cloud Platformの画面が開きます。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-4-1024x468.png)
プロジェクトを作成する
左上の「プロジェクトの選択」をクリックします。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-5.png)
プロジェクト選択ウィンドウが開くので、「新しいプロジェクト」をクリックします。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-6.png)
「新しいプロジェクト」作成画面が開くので、プロジェクト名を入力し「作成」をクリック。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-8.png)
プロジェクトが作成できました。(^^)
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-9-1024x479.png)
Googleマップの「Maps Javascript API」を有効化します。
左側のメニューから「APIとサービス」の「ライブラリ」をクリックします。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-11.png)
「APIライブラリにようこそ」の画面になりました。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-12-1024x476.png)
検索窓に「マップ」と入力すると、マップに関するAPIが表示されます。
下の方にある「Maps Javascript API」を選択します。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-13-1024x457.png)
Maps Javascript API の画面が開くので、「有効にする」をクリックします。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-14.png)
これで、私のアカウントの「MAPproject」内に、Googleマップの「Maps Javascript API」が有効化できました。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-15-1024x477.png)
OAuth同意画面設定
ここで一旦、右上ハンバーガーメニューから、Google Cloud Platformに一旦戻ります。
そして、左メニューから、「APIとサービス」の「OAuth同意画面」に入ります。
![](https://gambaranaide.work/wp-content/uploads/2020/05/kiriさま_最終□680枠50.jpg)
OAuth同意画面のチェックをしておかないと、
APIが有効にならない感じです。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-16.png)
User Typeの設定をします。「外部」にチェックして、作成ボタンをクリックします。
※私はG-suiteユーザーではないので、「内部」にはチェックできませんでした。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-17.png)
作成をクリックすると、OAuth同意画面の詳細の設定に移ります。
だんだん設定内容が濃くなってきましたね…。とりあえずアプリ名を入力し、メールアドレスを確認して(今回テスト利用のため、ロゴや利用ドメインは設定せずに)進んでみます。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-19-1024x524.png)
とりあえず設定できたようです。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-20-1024x574.png)
次はGoogleマップAPIキーの取得です。
いよいよAPIキーを取得します。
右上ハンバーガーメニューから「APIとサービス」「認証情報」をクリックします。
左画面の「+認証情報を作成」をクリック。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-21-1024x555.png)
そして「認証情報を作成」のサブメニューから「APIキー」をクリック。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-22.png)
APIキーが生成されました。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-23-1024x382.png)
このAPIキーは制限なしの状態なので名前の前にビックリマークがついています。
APIキーの制限設定
APIキーが悪用されにくくなるよう、利用目的に絞った制限をかけます。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-24.png)
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-25-1024x562.png)
APIの制限
今回は「Maps Javascript API」だけを使うので、「APIの制限」は設定しました。
「キーを制限」をONにして、使用するAPIとして「Maps Javascript API」をONに。
そして忘れずに「保存」!
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-27.png)
ビックリマークが安全マークに変わりました。(^^)
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-28.png)
その他の制限の設定項目を確認しておきました。
HTTPリファラーで制限
特定のWebサイトでの利用のみとする場合です。ドメインで設定します。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-29.png)
IPアドレスで制限
利用許可するサーバーをIPアドレスで設定します。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-31.png)
Androidアプリのみで利用する場合
Androidアプリのみで利用する場合は、Androidアプリで制限をかけることができます。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-32.png)
iOSで制限する場合
Android同様、もちろんiOSでもOKI。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-33.png)
コードを実装してAPIで呼び出してみよう!あれ?
実際に、こちらのコードをコピペして表示させてみました。
(テスト用にMAMPをPCにインストールして、ローカルでWebページの動作を確認しています。)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9R29vZ2xlJTIwTWFwcyUyMEFQSSUyMCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZDJkM2ZhYjRhNmExOTU3MDUyYjQyMzBlMjc4MTk5ODk&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBIYXJ1a2EtT2dhd2EmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFmNTk1NzU4ODA1MTA4ZTVkYjNhODZjYzhjM2JiNWY1&blend-x=142&blend-y=486&blend-mode=normal&s=69a796b4e3dac0f0fcf7b413bec6d405)
すると…こんな感じに。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-34-1024x393.png)
この「このウェブサイトの所有者ですか?」をクリックしたところ、
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-35-1024x532.png)
どうやら、APIキーに請求先アカウントが紐付いていないから、薄暗い表示に。請求先アカウントとしてクレカの登録をするのはいいけれど、有料なのかな…?
GoogleマップAPIの料金について
Googleマップ利用は、基本従量課金で、1ヶ月無料枠が200ドルついています。そして今回利用した「Maps Javascript API」はリクエスト1000件で$7(2020年9月現在)。
- 1ヶ月$200無料
- アクセス数に応じて課金される
- 1リクエスト約0.7円
テストで使うなら無料で行けますね。
チョット待って。Google Cloud Platformの3ヶ月無料(または$300のクレジット)との関連は?
Google Cloud Platformでは、請求先アカウント登録時点から
- 3ヶ月間
- $300の無料クレジット
どちらかが終了した時点で、Googleマップとしての課金(先程の条件)が開始されるとのこと。
請求先アカウントを登録することにしました。
請求先アカウントの登録(無料トライアルの申込み)
請求先アカウントを登録します。
Google Cloud Platformの左上ハンバーガーメニューから「お支払い」をクリックして
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-36.png)
お支払い画面の、「請求先アカウントを管理」をクリック。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-37.png)
「請求先アカウントを追加」しました。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-38.png)
そして、利用規約にチェックして「続行」をクリック。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-39-1024x494.png)
個人情報を入力。アカウントの種類は「ビジネス」か「個人」かが選択できます。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-40.png)
住所・連絡先電話番号やメールアドレス、クレジットカードの情報を入力して登録しました。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-41.png)
「自動請求を有効にする」まで課金されることはありません。
とのこと。課金されるときには、事前に何らかの連絡があるようです。
MapProjectに請求先アカウントをリンクする
MapProjectに請求先アカウントがリンクされているかを確認します。
Google Cloud Platformのプロジェクト名を「マッププロジェクト」にします。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-48.png)
左メニューの「お支払い」をクリックすると、「請求先アカウントがありません」と表示が。
「請求先アカウントをリンク」をクリックします。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-45.png)
請求先アカウントを選び「アカウントを設定」ボタンをクリック。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-46.png)
画面が変わり、Mapプロジェクトのお支払い画面が表示されました。
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-47.png)
今度こそ地図を!
そして、先程の地図がどうなったかというと…
![](https://gambaranaide.work/wp-content/uploads/2020/09/image-49-1024x507.png)
無事、エラーなく表示されました!めでたしめでたし。
![](https://gambaranaide.work/wp-content/uploads/2020/05/kiriさま_最終□680枠50.jpg)
Javascript の勉強どころじゃなかったです💦
コメント