GoogleMapAPIを使ってみた。【2020年9月】

GoogleMapAPIを使おうとググったところ、Google Cloud Platform導入後の設定方法がわかりにくかったので、登録しながら記事にしてみました。どうなることでしょう。ワクワク💕(^^)

こちらのサイトを参考にしつつ、進めていきます。

Qiita

Google Maps API を使ってみた - Qiita 1. Google Maps APIとはGoogle Maps APIを使用することで、Google Mapの機能をウェブサイトやアプリに埋め込むことができます。Google Maps APIに…

GoogleアカウントでログインしてGoogle Cloud Platform にアクセス

表題のとおりです。Google Cloud Platformのリンクはこちら。

Google Cloud

Cloud Computing Services | Google Cloud Meet your business challenges head on with cloud computing services from Google, including data management, hybrid & multi-cloud, and AI & ML.

リンクをクリックすると、右上に「コンソール」が表示されます。ここをクリック。

すると、「利用規約に同意」のポップアップが開きます。

2箇所チェックして「同意して続行」をクリック。
Google Cloud Platformの画面が開きます。

プロジェクトを作成する

左上の「プロジェクトの選択」をクリックします。

プロジェクト選択ウィンドウが開くので、「新しいプロジェクト」をクリックします。

「新しいプロジェクト」作成画面が開くので、プロジェクト名を入力し「作成」をクリック。

プロジェクトが作成できました。(^^)

Googleマップの「Maps Javascript API」を有効化します。

左側のメニューから「APIとサービス」の「ライブラリ」をクリックします。

「APIライブラリにようこそ」の画面になりました。

検索窓に「マップ」と入力すると、マップに関するAPIが表示されます。
下の方にある「Maps Javascript API」を選択します。

Maps Javascript API　の画面が開くので、「有効にする」をクリックします。

これで、私のアカウントの「MAPproject」内に、Googleマップの「Maps Javascript API」が有効化できました。

OAuth同意画面設定

ここで一旦、右上ハンバーガーメニューから、Google Cloud Platformに一旦戻ります。
そして、左メニューから、「APIとサービス」の「OAuth同意画面」に入ります。

User Typeの設定をします。「外部」にチェックして、作成ボタンをクリックします。
※私はG-suiteユーザーではないので、「内部」にはチェックできませんでした。

作成をクリックすると、OAuth同意画面の詳細の設定に移ります。
だんだん設定内容が濃くなってきましたね…。とりあえずアプリ名を入力し、メールアドレスを確認して（今回テスト利用のため、ロゴや利用ドメインは設定せずに）進んでみます。

とりあえず設定できたようです。

次はGoogleマップAPIキーの取得です。

いよいよAPIキーを取得します。
右上ハンバーガーメニューから「APIとサービス」「認証情報」をクリックします。
左画面の「＋認証情報を作成」をクリック。

そして「認証情報を作成」のサブメニューから「APIキー」をクリック。

APIキーが生成されました。

このAPIキーは制限なしの状態なので名前の前にビックリマークがついています。

APIキーの制限設定

APIキーが悪用されにくくなるよう、利用目的に絞った制限をかけます。

APIの制限

今回は「Maps Javascript API」だけを使うので、「APIの制限」は設定しました。
「キーを制限」をONにして、使用するAPIとして「Maps Javascript API」をONに。
そして忘れずに「保存」!

ビックリマークが安全マークに変わりました。(^^)

その他の制限の設定項目を確認しておきました。

HTTPリファラーで制限

特定のWebサイトでの利用のみとする場合です。ドメインで設定します。

IPアドレスで制限

利用許可するサーバーをIPアドレスで設定します。

Androidアプリのみで利用する場合

Androidアプリのみで利用する場合は、Androidアプリで制限をかけることができます。

iOSで制限する場合

Android同様、もちろんiOSでもOKI。

コードを実装してAPIで呼び出してみよう！あれ？

実際に、こちらのコードをコピペして表示させてみました。
（テスト用にMAMPをPCにインストールして、ローカルでWebページの動作を確認しています。）

Qiita

Google Maps API を使ってみた - Qiita 1. Google Maps APIとはGoogle Maps APIを使用することで、Google Mapの機能をウェブサイトやアプリに埋め込むことができます。Google Maps APIに…

すると…こんな感じに。

この「このウェブサイトの所有者ですか？」をクリックしたところ、

どうやら、APIキーに請求先アカウントが紐付いていないから、薄暗い表示に。請求先アカウントとしてクレカの登録をするのはいいけれど、有料なのかな…？

GoogleマップAPIの料金について

Googleマップ利用は、基本従量課金で、1ヶ月無料枠が200ドルついています。そして今回利用した「Maps Javascript API」はリクエスト1000件で$7（2020年9月現在）。

テストで使うなら無料で行けますね。

Google Maps Platform

料金プランと API の費用 - Google Maps Platform

チョット待って。Google Cloud Platformの3ヶ月無料（または$300のクレジット）との関連は？

Google Cloud Platformでは、請求先アカウント登録時点から

1. 3ヶ月間
2. $300の無料クレジット

どちらかが終了した時点で、Googleマップとしての課金（先程の条件）が開始されるとのこと。
請求先アカウントを登録することにしました。

請求先アカウントの登録（無料トライアルの申込み）

請求先アカウントを登録します。
Google Cloud Platformの左上ハンバーガーメニューから「お支払い」をクリックして

お支払い画面の、「請求先アカウントを管理」をクリック。

「請求先アカウントを追加」しました。

そして、利用規約にチェックして「続行」をクリック。

個人情報を入力。アカウントの種類は「ビジネス」か「個人」かが選択できます。

住所・連絡先電話番号やメールアドレス、クレジットカードの情報を入力して登録しました。

「自動請求を有効にする」まで課金されることはありません。

とのこと。課金されるときには、事前に何らかの連絡があるようです。

MapProjectに請求先アカウントをリンクする

MapProjectに請求先アカウントがリンクされているかを確認します。
Google Cloud Platformのプロジェクト名を「マッププロジェクト」にします。

左メニューの「お支払い」をクリックすると、「請求先アカウントがありません」と表示が。
「請求先アカウントをリンク」をクリックします。

請求先アカウントを選び「アカウントを設定」ボタンをクリック。

画面が変わり、Mapプロジェクトのお支払い画面が表示されました。

今度こそ地図を！

そして、先程の地図がどうなったかというと…

無事、エラーなく表示されました！めでたしめでたし。