ReactでGoogleMapsを扱う(@vis.gl/react-google-maps版)

はじめに

ReactでGoogleMapsを扱うときは@googlemaps/react-wrapperを使うのが多分公式推奨ですが、@vis.gl/react-google-mapsという新しいライブラリがあるみたいなので試しに使ってみました

2024年4月現在@vis.gl/react-google-mapsはアルファ版なので諸々気をつけましょう
この記事ではv0.9.0を使っています

GoogleMapsのAPIキー取得、設定

公式ドキュメントに従って取得します

APIキーの保護はHTTPリファラー(ウェブサイト)
リファラーにはホストや開発環境のURLを設定します
適当にhttp://localhost:3000/*とか設定しておけば開発環境向けに制限できます

使ってみる

https://github.com/visgl/react-google-maps のREADMEのコードをコピペしてみます

import {APIProvider, Map, Marker} from '@vis.gl/react-google-maps';

function App() {
  const position = {lat: 53.54992, lng: 10.00678};
  return (
    <div className="App" style={{height:'100vh', width:'100%'}}>
      <APIProvider apiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
        <Map defaultCenter={position} defaultZoom={10} >
          <Marker position={position} />
        </Map>
      </APIProvider>  
    </div>
  );
}

export default App;

できました。単純すぎて書くことが無い

PinやInfoWindowはコンポーネントが準備されてるのでそのまま使えます
Polylineとかも追加されそうな雰囲気

import {APIProvider, Map, Marker, AdvancedMarker, Pin, InfoWindow, useMarkerRef} from '@vis.gl/react-google-maps';
function App() {
  const center = {lat: 35.689412, lng: 139.6866351};
  // 略
  const [markerRef, marker] = useMarkerRef();

  return (
    <div className="App" style={{height:'100vh', width:'100%'}}>
      <APIProvider apiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
        <Map defaultCenter={center} defaultZoom={12} mapId={REACT_APP_GOOGLE_MAPS_MAP_ID} >
          <Marker position={center} />
          { 
            pins.map(pin => (
              <AdvancedMarker position={pin}>
                <Pin background={pin.color} glyphColor={'#FFF'} borderColor={'#000'} />
              </AdvancedMarker>
            ))
          }
          <Marker ref={markerRef} position={{lat: 35.730671, lng: 139.7866351}} />
          <InfoWindow anchor={marker}>
            <h2>InfoWindowテスト</h2>
            <p>→千葉</p>
          </InfoWindow>
        </Map>
      </APIProvider>  
    </div>
  );
}

export default App;

感想

@googlemaps/react-wrapperだと自前でマーカーのコンポーネント作らなきゃいけなかったけど、一般的なユースケースであれば用意されてるコンポーネント並べるだけでなんとかなりそうで良い