Google Maps Platformと@googlemaps/react-wrapperの準備

こんにちは、エンジニアチームのさらだです。

皆さんはGoogle Mapはお好きでしょうか。僕は方向音痴なのでいつも助けられており大好きです。
今回はそんなGoogle MapをReactで利用する方法についてご紹介したいと思います。

Google Map APIを利用するReactライブラリは@react-google-maps/apiをはじめとしていくつもあります。 ライブラリの選択はやりたいことがやれるか、保守されているかなどを考慮して決めますが、今回はGoogle Maps Platformが提供している@googlemaps/react-wrapperを使っていきます。

自作マーカーやポリライン機能を使った描画などを紹介できるよう、
今回は「2地点を選ぶと、五芒星を描いて聖地を作ってくれるアプリ」を例として作っていきます。

流れは以下です。

• @googlemaps/react-wrapperを利用できるようにする
• @googlemaps/react-wrapperで自作マーカーを表示する
  
• ポリラインを使って2点間を結ぶ
• Place APIで残りの聖地を自動選出する
  
• 5つの聖地を五芒星で結ぶ

完成系はこうなります。

今回はGoogle Maps Platformについて紹介し、開発環境の準備を行って行きます。

環境

• typescript: v5.0.2
• react: v18.2.0
• next: v13.2.4
• @googlemaps/react-wrapper: v1.1.35

Google Maps Platformとは

Google Maps PlatformとはGoogleが提供する地図、位置情報に関するAPIやSDKなどをまとめたサービスです。
地図の描画や、経路探索、登録されたスポットの情報の取得など色々な機能が使えます。

料金について

Iframeでの地図埋め込みに関しては無料でできます。
経路探索の利用や地図のカスタマイズをしようとすると、リクエスト数に応じた従量課金が必要になります。
月200$の無料枠があるため、スモールビジネスであれば費用が発生しないことが多いと思います。

https://mapsplatform.google.com/intl/ja/pricing/

公共交通機関を利用した経路

想定できる”地図に関するサービス”の多くはGoogle Maps APIで実現できそうですが、
公共交通機関、つまり電車やバス、タクシーなどを利用した経路探索、料金算出は現在”日本に限り”対応していません。

https://developers.google.com/maps/faq?hl=ja#transit_directions_countries

利用方法

iframeを利用する方法は割愛しますが、APIによる利用か、JS、iOS(Swift、Objective-C)、Android(Kotlin、Java)で用意されたSDKによる利用になります。

今回は、React上でGoogle Maps Platformを利用したいので、JS SDKをReact用にwrapしてくれている@googlemaps/react-wrapperを使います。

いずれの実装方法であっても、Google Cloud Platform内でプロジェクトを作成し、
Google Maps PlatformのAPI keyを発行する必要があります。
次項で実際にAPI keyを発行していきましょう。

APIキーの発行

おおむね、公式のリファレンス(https://developers.google.com/maps/documentation/javascript/cloud-setup)通りの作業になります。

Google Cloud Platform(以下GCP)に関しては、今回は大きく触れません。
GCPはGoogleの提供する各種クラウドサービスを組み合わせ、”プロジェクト”という単位でまとめて運用します。
そこで今回は、「2地点を選ぶと、五芒星を描いて聖地を作ってくれるアプリ」に対して1つのプロジェクトを用意すると想定して進めます。

プロジェクトの作成

まずはGCPのプロジェクトを作成します。
まだ、GCPのアカウントを持っていない方はGoogleアカウントを元に作成してください。

プロジェクト名は表示上わかりやすいものを入力してください。 consoleでの指定はproject-idなどを指定するので、ユニークかどうかなどは気にしなくても大丈夫です。

請求先アカウントはGCPの各料金の支払いに利用するアカウントです。 複数登録可能なものなので、利用したいアカウントを選択してください。
請求先アカウントを作成していない場合はこの項目は存在しませんが、 Google Maps Platformの利用には必須なので、後述の課金設定にて請求先アカウントの作成をしてください。

組織は、プロジェクトの上位概念です。
既に法人として持っている場合は、選択してください。
個人の場合は、組織なしを選択してください。

場所は、プロジェクトを配置する場所です。
階層構造で管理することができるので、適宜管理しやすいようにフォルダを用意したりするなどしてください。

必要な項目全ての入力が完了したら、作成ボタンを押してください。
以下の画面が表示されたらプロジェクトの作成は完了です。

課金設定

次に課金設定を行います。GCPは登録時の無料枠$300と、Google Maps Platformに関しては月$200の無料枠がありますが、課金設定を行わないと利用することができません。
課金設定しても、上記無料枠内であれば支払いは発生しません。アラート設定も可能ですので、お試しであっても何かしらの登録は行なって下さい。

では先ほどのプロジェクトのダッシュボードから、左上のハンバーガメニュー内"お支払い"の項目をクリックしてください。

クリックするとページが遷移しますが、請求先アカウントが存在するか、またプロジェクトにリンクされているかで表示が変わります。
今回は、請求先アカウントを1つも持っていない状況だとします。
その場合、請求先アカウントの作成とリンクを促すプロンプトが出ます。(スクショは撮れませんでした。)
指示に従い、請求先アカウントの作成画面に進んでください。

名前には区別がつきやすいものをつけ、続行をクリックしてください。

初めて請求先アカウントを作るので、おそらくお支払いプロファイルも存在しないと思います。
アカウントの種類を個人・ビジネスから選択し、支払い方法を埋めてください。
ビジネスを選択した場合は企業/組織名は必須になりますが、その場合は既に組織リソースを既に作成していると思います。同じ名前を入力してください。

必須事項を入力したら"送信して課金を有効にする"をクリックして完了です。

請求先アカウントの作成が成功すると、作成した請求先アカウントのダッシュボードに移動してしまうかも知れません。その場合は改めて、プロジェクトに戻り同手順を行ない、プロジェクトと請求先アカウントをリンクしてください。

APIキーを生成する

ではGoogle Maps Platformの準備を進めていきましょう。
まずは、上部の検索フォームからGoogle Map Platformを探してください。
左上のハンバーガーメニューから探すこともできます。

すると、初回アクセス時には以下のようなAPIキーを生成するプロンプトが表示されます。
チェックボックスはどちらもONにした上で進んでください。
2つ目のチェックボックスをONにしておくと、リンク済み請求アカウントの予算アラート設定に、200$の無料枠を軸としたアラートが追加されます。

APIキーの作成が完了すると、Google Maps Platformのダッシュボードに行きます。
既にAPIキーが発行されているので、そのAPIキーを使えばAPIを利用できます。
ですが現状APIキーのスコープが広すぎるため、このAPIキーを使ってアプリケーションを公開するのは危険です。
そのため、利用できる場所と利用できるAPIの種類の2軸で制限をかけていきます。

APIキーの制限

画面左のサイドメニューから認証情報をクリックしてください。

APIキーのリストに先ほど作成したキーが表示されれています。
対象キーの右側にあるアイコンからAPIキーの編集画面に移動してください。

まずは使用場所の制限を行なっていきます。
今回はWebページからJSを通してアクセスする予定です。
制限方法がいくつか表示されていますが、今回はウェブサイトを選択します。

するとドメイン・URLでのホワイトリストが作れるようになります。
ADDボタンを押して追加してください。(画面右に指定ルールが書いてあるので参考にしてください。)

次にAPIの制限を行います。
こちらも利用する最低限のAPIだけを選択してください。
今回は、表示用のMaps Javascript APIと、施設情報を取得するためにPlaces APIを利用します。

最後に保存を押して準備は完了です。

@googlemaps/react-wrapperのインストール

@googlemaps/react-wrapperなど必要なパッケージをインストールします。
今回はフレームワークとしてNext.jsを使うため、Next.jsもインストールします。

npm i typescript react react-dom next @googlemaps/react-wrapper

型定義パッケージも用意しておきます。
@types/google.mapsはMaps Javascript API全般の型定義パッケージです。
Maps Javascript APIの本体とも言えるgoogle.mapsオブジェクトには直接アクセスすることも多いので、入れておいてください。

npm i -D @types/react @types/react-dom @types/google.maps

Mapの表示

では画面上にMapを表示してみましょう。

// Map.tsx
import React, { useEffect, useRef, useState } from 'react';
import { Wrapper } from '@googlemaps/react-wrapper';

const MAP_API_KEY = 'xxxx'; // 先ほど生成したAPIキー

// 最初にMapを表示する時の設定
const DEFAULT = {
  CENTER: {
    lat: 35.6973225,
    lng: 139.8265658 
  } as google.maps.LatLngLiteral,
  ZOOM: 16
} as const;

// width指定がないと描画されない。
const VIEW_STYLE = {
  width: '100%',
  aspectRatio: '16 / 9',
}

const Map: React.FC = () => {
  return (
    <Wrapper apiKey={MAP_API_KEY}>
      <Content />
    </Wrapper>
  );
};

// 中身
const Content: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null);
  const [map, setMap] = useState<google.maps.Map>();

  useEffect(() => {
    if (ref.current && !map) {
      const option = {
        center: DEFAULT.CENTER,
        zoom: DEFAULT.ZOOM,
      };
      setMap(new window.google.maps.Map(ref.current, option));
    }
  }, []);

  return (
    <div style={VIEW_STYLE} ref={ref} />
  );
};

export default Map;

Google MapをレンダリングしてくれるComponentを作ります。
実際に色々やっているComponentはContentで別に用意します。

Wrapper

Maps Javascript APIの読み込みを制御するComponentです。
ここでAPIキーを指定します。後の記事でMaps Javascript APIが読み込まれたタイミングで実行したい処理が出てきますが、そのようなローディング制御ができます。

Mapオブジェクトの生成

Mapオブジェクトの生成はWrapper Componentの子であるContenet Compnentで行っています。

Wrapper Componentに話題が戻りますが、Wrapper Componentの中身を見てみると、Maps Javascript APIの読み込みが成功したタイミングで子Compomentを生成していることがわかります。そのため、Content Component内ではAPIの各機能が使えることが保証されます。

また、Mapのレンダリングには対象となるDOMの指定が必要なため、useEffectを用いてrefと既にMapオブジェクトが用意されていないかを確認してからMapオブジェクトを生成します。
この際、centerとzoomの指定とレンダリング対象DOMのwidthの指定がないと、Mapが表示されないのでそれぞれ指定しましょう。
centerは表示するMapの中心座標(緯度、経度)、zoomは表示倍率を表しており適当な値を入れてあります。

表示確認

ということで上記のコードを実行すれば、
シンプルなGooge Mapが表示されると思います。

まとめ

ということで、@googlemaps/react-wrapperを利用してGoogle Mapを表示することができました。

しかし今回は「2地点を選ぶと、五芒星を描いて聖地を作ってくれるアプリ」ということで、まだまだやることがあります。
ということで次回は、自作マーカーを表示させましょう。

(全4回予定です。)