Google Cloud Platform にGoogle Maps Platform(Google Maps API)が仲間入りしたので、試してみた

今月のはじめに、Google Maps API を使用した新しいPlatform 「Google Maps Platform」をGoogle が発表しました。
今までGCPとは別のサービスだったGoogle Maps API が、Google Cloud Platform の仲間に入ったことで、Google Cloud Platform のコンソールからAPI の利用状況などが管理できるようになりました。

実際にどういう画面になるのか、連携方法はどうするか試してみます。
どうせ試すならということで、新しくなったGoogle Maps Platform とGoogle Cloud Platform を使い、API リクエストを送信するWebページの作成、Google Maps の画面を表示させてみようと思います!
それではやってみましょう!!

1. Google Maps API の有効化

まず最初に、Google Cloud Platform で使用するために、API の有効化をします。
Google Maps Platform の公式サイトから、「使ってみる」を選択

選択後、ポップアップが表示され、どのプロダクトを有効にするかチェックします。
今回はすべてのプロダクトにチェックをいれました。
必要なプロダクトを選択後「CONTINUE」を選択。

CONTINUE 選択後、使用するGCPプロジェクトを選択します。
作業中のアカウントでアクセスできるプロジェクトの一覧が表示されるので、Maps API を使用するプロジェクトを選択。
新しくプロジェクトを作成するでもOKです。

プロジェクトの選択後「NEXT」を選択

NEXT 選択後、自動的にGCPコンソールにリダイレクトされます。
GCPコンソールでは以下のような画面が表示されると思いますので、「次へ」を選択。

APIが有効化され、赤枠内にGoogle Maps API へリクエストを送るのに必要な、APIキーが表示されます。
API キーが外部に漏れてしまうと、API キーの値を知っている人は自由にAPI へリクエストを送れてしまいます。取り扱いにはご注意ください。

APIキーをコピーし、DONE を選択します。
APIキーを忘れてしまった場合や、API キーの制限変更を行いたい場合、Cloud Console の「API とサービス」、「認証情報」の順番に移動し、APIキーの確認、編集が可能です。

API の有効化が完了しました。
これで、Cloud Console からGoogle Maps Platform を確認でき、API の管理や課金の確認ができるようになりました!

2. 実際に使ってみた

API の有効化、管理コンソールの表示までできたので、実際にどういうものなのか、公式ドキュメントのチュートリアルをやってみたいと思います。

今回試すAPI は、Maps JavaScript API です。
こちらのチュートリアルを参考にして、試してみます。

Maps JavaScript API とは

Google Maps JavaScript API は、Android や iOS などのモバイル端末向けに力を入れたAPIです。モバイル端末に簡単にロードできて、正しく動作するように設計されています。

2.1. コンテンツ作成

公開するコンテンツを作成します。

コード
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
<!DOCTYPE html>
    <h3>My Google Maps Demo</h3>
<!DOCTYPE html>
    <div id=“map”></div>
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id=“map”></div>
    <script>
      function initMap() {
        var caOffice = {lat: 35.684952, lng: 139.769842};
        var map = new google.maps.Map(document.getElementById(‘map’), {
          zoom: 4,
          center: caOffice
        });
        var marker = new google.maps.Marker({
          position: caOffice,
          map: map
        });
      }
    </script>
    <script async defer
    src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY=initMap“>
    </script>
  </body>
</html>

var caOffice = {lat: , lng: } の値は、経度と緯度を表しています。
ここの数値を変更することで、表示される地図情報の変更ができます。

作成したhtmlコンテンツは、ローカルの任意の場所に保存しましょう。

2.2. 画面の確認

どういうページが表示されるか確認します。
先ほど作成したhtml コンテンツを保存したフォルダから、ブラウザに対して直接画面を表示させます。
(今回使用したブラウザはChromeです。)
フォルダから作成したhtmlファイルをドラッグ&ドロップ

すると…

マップが表示されます。おぉ…遠い…
デフォルトの表示をもう少し細かくしたいので、html ファイル内の 「zoom:」の値を変更しましょう。
もともと 4で設定されていたため、15に変更してみます。

わかりやすくなりましたね。
ちなみにアイコンが指し示しているのはクラウドエースのオフィスです。

2.3. Google Cloud Platform Console で確認

API リクエストを送ったため、GCP コンソールで値がどのように変化しているか確認してみましょう。

リクエストを行なった分、Maps JavaScript API の値が増加しています。
GCP コンソール上から各Maps API のリクエスト数が簡単に確認できるので、管理が非常に楽ですね。

3. 標準プランとプレミアムプラン

Google Maps API には、無料で利用できる標準プランと有料のプレミアムプランがあります。
標準プランでは、Maps API へのリクエストに1日あたりの制限があります。超過した分に関しては、別途料金が発生していく仕組みです。
プレミアムプランでは、広告の非表示やAPIによって標準プランにはない拡張機能が使えます。
また、Maps APIs Creditsと呼ばれるクレジットを購入し、リクエスト数によってクレジットを消費する仕組みです。
すべてのクレジットを消費してからは、別途クレジットの追加を行えますが、追加を行わなかった場合、リクエスト数によって超過料金が発生します。

下記は各API でのプランによる違いです。

API 標準プラン プレミアムプラン
Google Maps Android API 制限なしの無料利用 Maps APIs Creditsを購入
Google Places API for Android 1 日 1,000 件のリクエストが無料。
課金の有効後、無料リクエストを
1 日 150,000 件まで引き上げ可能。
プラン範囲外
Google Maps SDK for iOS 制限なしの無料利用 Maps APIs Creditsを購入
Google Places API for iOS 1 日 1,000 件のリクエストが無料。
課金の有効後、無料リクエストを
1 日 150,000 件まで引き上げ可能。
プラン範囲外
  • Google Maps JavaScript API
  • Google Static Maps API
  • Google Street View Image API
1 日あたり最大 25,000 回の
マップロードが無料。
課金が有効である場合、追加の
マップロードは 1,000 回あたり $0.50 USD。
1 日あたり最大 100,000 回。
Maps APIs Creditsを購入
2つの拡張機能・広告の非表示・
最大解像度 2048 × 2048 ピクセル
Google Maps Embed API 制限なしの無料利用 プラン範囲外
  • Google Maps Directions API
  • Google Maps Distance Matrix API
  • Google Maps Elevation API
  • Google Maps Geocoding API
  • Google Maps Geolocation API
  • Google Maps Roads API
  • Google Maps Time Zone API
1 日あたり 2,500 回のリクエストまで無料。
課金が有効である場合、追加のリクエストは
1,000 回あたり $0.50 USD。
1 日あたり最大 100,000 回。
Maps APIs Creditsを購入
2つの拡張機能

  • 1秒あたりのクエリ数の引き上げ
  • Distance Matrix API と
    Roads API 機能を拡張
Google Places API Web Service 1 日あたり 150,000 回のリクエストが無料 Maps APIs Creditsを購入

詳しい情報はドキュメントをご確認ください。

4. まとめ

本記事では、新しく導入されたGoogle Maps Platform とGoogle Cloud Platform の連携、Google Maps API の有効化方法とAPI リクエストを送る簡単なWebページ作成方法を紹介しました。

今までは、Google API Console にログインし、確認、管理していたものが、Google Cloud Platform からシームレスに利用できるようになりました。
GCPと合わせて利用する場合、複数のコンソールから管理する必要があったため連携や管理の面で不便と感じた方も少なくないと思います。

以前より簡単、便利になったGoogle Maps API 、利用しない手はないでしょう。

クラウドエース(Cloud Ace)はGCPの導入・運用支援サービスを提供しております。ご興味のある方はこちらまでお問い合わせください。Maps APIに限らず、あらゆるGCPサービスのサポートが可能です。

次の記事を読み込んでいます
次の記事を読み込んでいます
次の記事を読み込んでいます
次の記事を読み込んでいます
次の記事を読み込んでいます