markerを表示する

src/Components/MarkersOnGoogleMap.tsx

@@ -0,0 +1,48 @@
+import {
+  GoogleMap as GoogleMapComponent,
+  MarkerF,
+} from "@react-google-maps/api";
+import React, { FC } from "react";
+import { useMap } from "./useMap";
+
+type Props = {
+  defaultPosition: {
+    lat: number;
+    lng: number;
+  };
+};
+
+const MarkersOnGoogleMap: FC<Props> = (props) => {
+  const { isLoaded, onLoad } = useMap({
+    defaultPosition: props.defaultPosition,
+  });
+
+  const containerStyle = {
+    width: "100vw",
+    height: "75vh",
+  };
+
+  const markerLabel: google.maps.MarkerLabel = {
+    text: "ミライトデザイン",
+    fontFamily: "sans-serif",
+    fontSize: "15px",
+    fontWeight: "bold",
+  };
+
+  return (
+    <>
+      {isLoaded ? (
+        <GoogleMapComponent mapContainerStyle={containerStyle} onLoad={onLoad}>
+          <MarkerF
+            position={props.defaultPosition}
+            label={markerLabel}
+          ></MarkerF>
+        </GoogleMapComponent>
+      ) : (
+        "loading"
+      )}
+    </>
+  );
+};
+
+export default React.memo(MarkersOnGoogleMap);

src/Components/useMap.ts

@@ -1,10 +1,11 @@
 import { useJsApiLoader } from "@react-google-maps/api";
 import { googleMapsApiKey } from "./env";
+import { useState } from "react";
 
 export type Map = google.maps.Map;
 
 type Props = {
-  defaultPosition: { lat: number; lng: number };
+  defaultPosition: google.maps.LatLngLiteral;
 };
 
 export const useMap = ({ defaultPosition }: Props) => {
@@ -14,10 +15,13 @@ export const useMap = ({ defaultPosition }: Props) => {
     googleMapsApiKey,
   });
 
+  const [map, setMap] = useState<Map | null>(null);
+
   const onLoad = (map: Map) => {
     const bounds = new window.google.maps.LatLngBounds(defaultPosition);
     map.fitBounds(bounds);
+    setMap(map);
   };
 
-  return { isLoaded, onLoad };
+  return { map, isLoaded, onLoad };
 };