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ライブラリにようこそ」の画面になりました。

APIライブラリにようこそ

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

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

Maps Javascript APT画面

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

Googleマップ Maps Javascript APIの画面

OAuth同意画面設定

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

OAuth同意画面のチェックをしておかないと、
APIが有効にならない感じです。

OAuth同意画面へ

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

OAuth同意画面 その1

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

AOuth同意画面その2 詳細設定画面

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

AOuth同意画面(設定後)

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

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

APIキーの取得画面

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

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

APIキー取得完了!

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

APIキーの制限設定

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

名前をクリックすると、キーの設定が変更できます。
APIキーの設定変更画面

APIの制限

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

APIの制限 設定後

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

APIキー制限後

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

HTTPリファラーで制限

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

HTTPリファラーで制限する場合の設定項目

IPアドレスで制限

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

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

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

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

iOSで制限する場合

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

iOSのみの利用とする

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

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

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

すると…こんな感じに。

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

APIキーと請求エラー

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

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

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

  • 1ヶ月$200無料
  • アクセス数に応じて課金される
  • 1リクエスト約0.7円

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

Google Cloud
料金とプラン  |  Google Maps Platform  |  Google Cloud お客様のニーズに合わせた柔軟な料金プランをご確認ください。毎月、最初の $200 分は無料でお使いいただけます。それ以降は、使用した分だけお支払いください。

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

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

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

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

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

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

Google Cloud Platformのお支払い画面へ

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

お支払い管理画面(登録なし)

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

Google Cloud Platform 請求先アカウントを追加

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

Google Cloud Platformの無料トライアル登録画面その1

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

Google Cloud Platform無料トライアル 登録画面その2

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

Google Cloud Platform無料トライアル 登録完了画面

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

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

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

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

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

Mapプロジェクトお支払い画面

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

請求先アカウントの設定画面

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

お支払い画面(設定後)

今度こそ地図を!

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

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

Javascript の勉強どころじゃなかったです💦

よかったらシェアしてね!

この記事を書いた人

50代からの副業成就は可能なのか?
壮大なロマンに挑戦中のきりです。自分のできることから少しずつ。ね。

コメント

コメントする

CAPTCHA


目次
閉じる