Open3

ReactでGoogleMap APIを使う

buuibuui

実装

このサイトを参考にして実装

MapView.tsx
import React from "react";
import { MyMap } from "../MyGoogleMap/MyMap";
import { Wrapper } from "@googlemaps/react-wrapper";

const GOOGLE_MAPS_API_KEY = process.env.REACT_APP_GOOGLE_MAPS_API_KEY || "";

export const MapView = () => {
  return (
    <Wrapper apiKey={GOOGLE_MAPS_API_KEY}>
      <MyMap />
    </Wrapper>
  );
};
MyMap.tsx
import React, { useEffect, useState } from "react";
import { useRef } from "react";

const DEFAULT = {
  CENTER: {
    lat: 35.6973225,
    lng: 139.8265658,
  } as google.maps.LatLngLiteral,
  ZOOM: 16,
} as const;

const VIEW_STYLE = {
  width: "100%",
  aspectRatio: "16 / 9",
};

export const MyMap = () => {
  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} />;
};
buuibuui

どん詰まり

コンパイルエラー

Module not found: Error: Can't resolve '@googlemaps/react-wrapper' in '/code/src/components/MapView'

試したこと

node_moduleの再インストール

rm -rf node_modules
rm package-lock.json
npm install

→効果なし😇