ReactでGoogleMapsAPIを使う（#1地図表示だけ）

公式ドキュメントに記載されたやり方（に準じる形）でReactアプリケーションにGoogleMapsAPIを使ってみましたのでやり方を簡単にメモします。
公式はTypeScriptで記載されていましたが、ここではJavaScriptで書いていきます。

必要なコンポーネントをインストール

npm install @googlemaps/react-wrapper

必要なコンポーネントを作っていく（その①）

Test.js

import { Wrapper} from "@googlemaps/react-wrapper";
import Map from "./Map";

export default function Test(){

return (

<Wrapper apiKey={ここにAPIkey} >
  <Map/>
</Wrapper>
)
}

必要なコンポーネントを作っていく（その②）

Map.js

import {useRef,useEffect,useState} from 'react';

export default function Map(){
  const ref = useRef(null);
  const [map, setMap] = useState();

 useEffect(() => {
  if (ref.current && !map) {
    setMap(new window.google.maps.Map(ref.current, {
       center:{
          lat: 35.6809591,
          lng: 139.7673068,
      },
      zoom:8,
    }));

  }
}, [ref, map]);

return(
    <div ref={ref} style={{height:500, width:500}} />
  )
}

※divタグにheight,widthを指定していますが、ここでサイズ指定しないと正しくレンダリングれません。

完成！！

これだけで簡単に表示できました。

補足：マップコントロールを消す

上記の通り簡単にマップ表示はできましたが、地図内のコントロールボタン（左上の「地図/航空」、右上の「フルスクリーン」、右下上段の「ストリートビュー」）が不要だったので、消してしまいます。
※右下の縮尺ボタン（+-）は残します。
この場合は先程のMapコンポーネントのuseEffect内にあるnew window.google.maps.Mapの第二引数に現在渡しているオプションに追記します（現在はcenterとzoomだけを指定しており、zoomの直後にmapTypeControl,streetViewControl,fullscreenControlをfalseで追記）。

Map.js

import {useRef,useEffect,useState} from 'react';

export default function Map(){
  const ref = useRef(null);
  const [map, setMap] = useState();

 useEffect(() => {
  if (ref.current && !map) {
    setMap(new window.google.maps.Map(ref.current, {
       center:{
          lat: 35.6809591,
          lng: 139.7673068,
      },
      zoom:8,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl: false,
    }));

  }
}, [ref, map]);

return(
    <div ref={ref} style={{height:500, width:500}} />
  )
}

こちらも完成！

少しスッキリさせられました。