Open3
ReactでGoogleMap APIを使う
インストール
@googlemaps/react-wrapper
と型定義を追加
cd project
npm install @googlemaps/react-wrapper @types/google.mapstypes/google.maps
実装
このサイトを参考にして実装
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} />;
};
どん詰まり
コンパイルエラー
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
→効果なし😇