【Google Map API】ReactプロジェクトでGoogle Mapを表示したい

react.jsプロジェクトでGoogle Map APIを使用してMAPを表示し、さらに以下の操作をしたかったので調査した

• オリジナルのマーカーの作成
• ズームインアウトボタンの場所変更
• マーカーをクリックして吹き出しを表示する

最初に

Google Map API を利用するためにはトークンを取得する必要がある
既にGCPを利用しているので、コンソールからGoogle マッププロジェクトに移動して利用したいAPIを有効にする

有効にしたのは以下のAPI

• Maps JavaScript API

google-map-reactのnpmインストール

このライブラリを利用する github.com

ダウンロード数とマーカーは子コンポーネントを作るだけというお手軽さから選択した

基本的な使い方はこのような感じ

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class SimpleMap extends Component {
  static defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33
    },
    zoom: 11
  };

  render() {
    return (
      // Important! Always set the container height explicitly
      <div style={{ height: '100vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text="My Marker"
          />
        </GoogleMapReact>
      </div>
    );
  }
}

export default SimpleMap;

これをベースに機能を足していく

オリジナルのマーカーの作成

上のサンプルコードにあるように子コンポーネントAnyReactComponentがマーカーコンポーネントになり、スタイルを当てることができる

この際、マーカーコンポーネントにはlat, lngのプロパティをセットする必要がある

          <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text="My Marker"
          />

Google Map Javascript APIの機能の利用

描画時にGoogle Map Javascript APIの機能を利用したい場合は、onGoogleApiLoadedをセットする

...

const handleApiLoaded = (map, maps) => {
  // use map and maps objects
};

...

<GoogleMapReact
  bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
  defaultCenter={this.props.center}
  defaultZoom={this.props.zoom}
  onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
>
  <AnyReactComponent
    lat={59.955413}
    lng={30.337844}
    text="My Marker"
  />
</GoogleMapReact>

このhandleApiLoadedの引数のmapオブジェクトはGoogle Map Javascript APIのMapオブジェクトになるので、 下のドキュメントを読んで機能を使用していく

developers.google.com

ズームインアウトボタンの場所を変更したい

Google Map Javascript APIのMapオブジェクトにはsetOptionsメソッドがあり、この引数にMapOptionsオブジェクトをセットする

MapOptionsオブジェクトはzoomControlOptionsというプロパティを持ち、これがズームインアウトボタンの表示オプションとなる

このzoomControlOptionsのpositionがデフォルトでは「右下」になっているので「左上」に変更したい
※positionにはControlPosition Constantsを使う

実装は先ほどのhandleApiLoadedの中でこのようにする

const handleApiLoaded = (map, maps) => {
  map.setOptions({
    zoomControlOptions: {
      position: maps.ControlPosition.LEFT_TOP,
    },
  });
};

マーカーをクリックして吹き出しを表示させたい

例）Airbnb

GoogleMapReactコンポーネントに以下の記述を追加するとマーカーのクリックイベントを取得することができる

onChildClick={key => showBalloon(key)}

onChildClickはイベント発生時に該当するコンポーネントのkeyと子コンポーネントの情報を返す

<GoogleMapReact
  bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
  defaultCenter={this.props.center}
  defaultZoom={this.props.zoom}
  onChildClick={(key: string) => changeBalloon(key)}
  onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
>

あとはshowBalloonで吹き出しコンポーネントの表示制御をしておわり（割愛）