[React + Google Maps API] google-map-reactを使った地図アプリをローカルで起動してみた

こんにちは、CX事業本部の若槻です。

Google Cloudで提供されるGoogle Maps APIを使えば、アプリのコンテンツにGoogle Mapを使用することができます。

• Google Maps Platform  |  Google Developers

そしてこのGoogle Maps APIをReactコンポーネント化したのがgoogle-map-reactです。npmやGitHubで公開されています。

• google-map-react - npm
• google-map-react/google-map-react: Google map library for react that allows rendering components as markers

今回は、google-map-reactのGitHubプロジェクトのexampleを参考に、google-map-reactを使用した地図アプリをローカルで起動してみました。

やってみた

アプリの起動（APIキーなし）

Google Maps APIの使用には原則としてAPIキーの設定が必要ですが、APIキーを設定をしなくても限定的ではありますが使えはします。まずはAPIキー無しでexampleアプリを起動してみます。

GitHubからgoogle-map-reactをGitクローンして、プロジェクトのルートにCDします。

% git clone https://github.com/google-map-react/google-map-react.git
% cd google-map-react

プロジェクトのルートでnpmにより必要なパッケージをインストールします。

% npm install

exampleディレクトリのソースに対してyarnでパッケージのインストールおよびアプリの起動をします。

% cd example
% yarn install
% yarn start

ブラウザでlocalhost:3000のURLで下記のようにWebアプリが起動します。example/public/places.jsonで定義された位置データがGoogle Mapのコンポーネント上に黒色のマーカーでプロットされています。

しかし上記のようにこのページでは Google マップは正しく読み込まれませんでした。というダイアログが表示され、また地図にFor development purposes onlyという透かしが入っていると思います。有効なAPIキーが設定されていないためこのような表示となります。

APIキー作成

exampleアプリに設定するためのAPIキーを作成します。手順は主に下記を参考にしました。

• Google Maps PlatformのAPIキー設定｜ゼンリンデータコム

Googleアカウントとプロジェクトの作成

GCPアカウントとプロジェクトは作成済みでしたのでスキップしました。

APIの有効化

プロジェクトで「Maps JavaScript API」を有効化します。

サイドメニューで[APIとサービス] - [ダッシュボード]を選択。

[APIとサービスの有効化]をクリック。

今回はAPIをWebアプリで使うのでMaps JavaScript APIを選択。

[有効にする]をクリック。

https://console.cloud.google.com/google/maps-apis/api-listを開くと、有効なAPI一覧にMaps JavaScript APIが追加されています。

これでMaps JavaScript APIを有効化できました。

APIキーの作成

先程と同じページでサイドメニューから[認証情報]を選択し、[APIとサービスの認証情報]をクリック。

[認証情報を作成]をクリックして[APIキー]を選択。

APIキーが作成されるので控えます。

※ここではキーの制限をしないためキーを公開しないようにしてください。パブリックなWebアプリでAPIキーを使用する場合は通常「HTTP リファラーによる制限」を設定します。

アプリの起動（APIキーあり）

example/src/App.jsで定義されている関数コンポーネントAppで、<GoogleMapReact>のプロパティbootstrapURLKeysに、下記のように先程作成したAPIキーを設定します。

  return (
    <Wrapper>
      <GoogleMapReact
        defaultZoom={10}
        defaultCenter={LOS_ANGELES_CENTER}
        bootstrapURLKeys={{
          key:'<APIキー>'
        }}
      >

アプリを再起動すると、今度は制限なくアプリ上でGoogle Mapを表示させられました。

マップを動かしたり縮尺を変更したりの操作ももちろん可能です。

おわりに

GitHubプロジェクトのexampleを参考に、google-map-reactを使用した地図アプリをローカルで起動してみました。

ReactアプリでのGoogle Maps APIの利用をとても簡単にお試しすることができて良いですね。

以上