Merge pull request #8 from DaigakuNakayoshi/can-use-google-api

GoogleMapのAPIを一旦叩けるようにした

.env.local.sample

@@ -0,0 +1 @@
+FRONTEND_GOOGLE_API_KEY="xxx"

package.json

@@ -16,6 +16,7 @@
     "@chakra-ui/react": "^3.2.0",
     "@emotion/react": "^11.13.5",
     "@tanstack/react-router": "^1.82.2",
+    "@vis.gl/react-google-maps": "^1.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0"

src/routeTree.gen.ts

@@ -12,6 +12,8 @@
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexImport } from './routes/index'
+import { Route as MapsIndexImport } from './routes/maps/index'
+import { Route as DirectionMapsIndexImport } from './routes/directionMaps/index'
 import { Route as ChakraUiIndexImport } from './routes/chakra-ui/index'
 import { Route as AboutIndexImport } from './routes/about/index'
 
@@ -23,6 +25,18 @@ const IndexRoute = IndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const MapsIndexRoute = MapsIndexImport.update({
+  id: '/maps/',
+  path: '/maps/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const DirectionMapsIndexRoute = DirectionMapsIndexImport.update({
+  id: '/directionMaps/',
+  path: '/directionMaps/',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const ChakraUiIndexRoute = ChakraUiIndexImport.update({
   id: '/chakra-ui/',
   path: '/chakra-ui/',
@@ -60,6 +74,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ChakraUiIndexImport
       parentRoute: typeof rootRoute
     }
+    '/directionMaps/': {
+      id: '/directionMaps/'
+      path: '/directionMaps'
+      fullPath: '/directionMaps'
+      preLoaderRoute: typeof DirectionMapsIndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/maps/': {
+      id: '/maps/'
+      path: '/maps'
+      fullPath: '/maps'
+      preLoaderRoute: typeof MapsIndexImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
@@ -69,40 +97,56 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/about': typeof AboutIndexRoute
   '/chakra-ui': typeof ChakraUiIndexRoute
+  '/directionMaps': typeof DirectionMapsIndexRoute
+  '/maps': typeof MapsIndexRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/about': typeof AboutIndexRoute
   '/chakra-ui': typeof ChakraUiIndexRoute
+  '/directionMaps': typeof DirectionMapsIndexRoute
+  '/maps': typeof MapsIndexRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
   '/about/': typeof AboutIndexRoute
   '/chakra-ui/': typeof ChakraUiIndexRoute
+  '/directionMaps/': typeof DirectionMapsIndexRoute
+  '/maps/': typeof MapsIndexRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/about' | '/chakra-ui'
+  fullPaths: '/' | '/about' | '/chakra-ui' | '/directionMaps' | '/maps'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/about' | '/chakra-ui'
-  id: '__root__' | '/' | '/about/' | '/chakra-ui/'
+  to: '/' | '/about' | '/chakra-ui' | '/directionMaps' | '/maps'
+  id:
+    | '__root__'
+    | '/'
+    | '/about/'
+    | '/chakra-ui/'
+    | '/directionMaps/'
+    | '/maps/'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AboutIndexRoute: typeof AboutIndexRoute
   ChakraUiIndexRoute: typeof ChakraUiIndexRoute
+  DirectionMapsIndexRoute: typeof DirectionMapsIndexRoute
+  MapsIndexRoute: typeof MapsIndexRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AboutIndexRoute: AboutIndexRoute,
   ChakraUiIndexRoute: ChakraUiIndexRoute,
+  DirectionMapsIndexRoute: DirectionMapsIndexRoute,
+  MapsIndexRoute: MapsIndexRoute,
 }
 
 export const routeTree = rootRoute
@@ -117,7 +161,9 @@ export const routeTree = rootRoute
       "children": [
         "/",
         "/about/",
-        "/chakra-ui/"
+        "/chakra-ui/",
+        "/directionMaps/",
+        "/maps/"
       ]
     },
     "/": {
@@ -128,6 +174,12 @@ export const routeTree = rootRoute
     },
     "/chakra-ui/": {
       "filePath": "chakra-ui/index.tsx"
+    },
+    "/directionMaps/": {
+      "filePath": "directionMaps/index.tsx"
+    },
+    "/maps/": {
+      "filePath": "maps/index.tsx"
     }
   }
 }

src/routes/__root.tsx

@@ -5,8 +5,9 @@ export const Route = createRootRoute({
   component: () => (
     <>
       <div>
-        <Link to="/">Home</Link> | <Link to="/about">About</Link> |{" "}
-        <Link to="/chakra-ui">chakraUi</Link>
+        <Link to="/">Home</Link> | <Link to="/about">About</Link> |
+        <Link to="/chakra-ui">chakraUi</Link> |<Link to="/maps">GoogleMap</Link>{" "}
+        |<Link to="/directionMaps">GoogleMap (direction)</Link>
       </div>
       <hr />
       <Outlet />

src/routes/directionMaps/index.tsx

@@ -0,0 +1,113 @@
+import { Box } from "@chakra-ui/react";
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  APIProvider,
+  Map as GoogleMap,
+  useMap,
+  useMapsLibrary,
+} from "@vis.gl/react-google-maps";
+import { useEffect, useState } from "react";
+
+export const Route = createFileRoute("/directionMaps/")({
+  component: Index,
+});
+
+const API_KEY = import.meta.env.FRONTEND_GOOGLE_API_KEY;
+
+export default function Index() {
+  return (
+    <div style={{ width: "100%", height: "100vh" }}>
+      <APIProvider apiKey={API_KEY}>
+        <GoogleMap
+          defaultZoom={8}
+          gestureHandling={"greedy"}
+          fullscreenControl={false}
+        >
+          <Directions />
+        </GoogleMap>
+      </APIProvider>
+    </div>
+  );
+}
+
+// @see: https://developers.google.com/maps/documentation/javascript/directions?hl=ja
+function Directions() {
+  const map = useMap();
+  const routesLibrary = useMapsLibrary("routes");
+  const [directionsService, setDirectionsService] =
+    useState<google.maps.DirectionsService>();
+  const [directionsRenderer, setDirectionsRenderer] =
+    useState<google.maps.DirectionsRenderer>();
+  const [routes, setRoutes] = useState<google.maps.DirectionsRoute[]>([]);
+  const [routeIndex, setRouteIndex] = useState(0);
+  const selected = routes[routeIndex];
+  const leg = selected?.legs[0];
+
+  // Initialize directions service and renderer
+  useEffect(() => {
+    if (!routesLibrary || !map) return;
+    setDirectionsService(new routesLibrary.DirectionsService());
+    setDirectionsRenderer(new routesLibrary.DirectionsRenderer({ map }));
+  }, [routesLibrary, map]);
+
+  // Use directions service
+  useEffect(() => {
+    if (!directionsService || !directionsRenderer) return;
+
+    directionsService
+      .route({
+        origin: "東京都新宿区西新宿2丁目8-1", // 都庁
+        waypoints: [{ location: "東京都港区赤坂9-7-1", stopover: true }], // ミッドタウン
+        destination: "東京都千代田区丸の内1丁目9番1号", // 東京駅
+        travelMode: google.maps.TravelMode.DRIVING,
+        provideRouteAlternatives: true,
+        avoidHighways: true,
+      })
+      .then((response) => {
+        directionsRenderer.setDirections(response);
+        setRoutes(response.routes);
+      });
+
+    return () => directionsRenderer.setMap(null);
+  }, [directionsService, directionsRenderer]);
+
+  // Update direction route
+  useEffect(() => {
+    if (!directionsRenderer) return;
+
+    directionsRenderer.setRouteIndex(routeIndex);
+  }, [routeIndex, directionsRenderer]);
+
+  if (!leg) return null;
+
+  return (
+    <Box
+      position="absolute"
+      top={4}
+      right={4}
+      bg="white"
+      p={4}
+      borderRadius="md"
+      shadow="lg"
+      maxW="sm"
+      maxH="80vh"
+      overflowY="auto"
+      fontSize={10}
+    >
+      <div className="directions">
+        <h2>{selected.summary || "ルート"}</h2>
+
+        {selected.legs.map((leg) => (
+          <div key={`${leg.start_address}-${leg.end_address}`}>
+            <p>
+              {leg.start_address.split(",")[0]}
+              <br />→ {leg.end_address.split(",")[0]}
+            </p>
+            <p>距離: {leg.distance?.text}</p>
+            <p>所要時間: {leg.duration?.text}</p>
+          </div>
+        ))}
+      </div>
+    </Box>
+  );
+}

src/routes/maps/index.tsx

@@ -0,0 +1,31 @@
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  APIProvider,
+  AdvancedMarker,
+  Map as GoogleMap,
+} from "@vis.gl/react-google-maps";
+
+export const Route = createFileRoute("/maps/")({
+  component: Index,
+});
+
+const API_KEY = import.meta.env.FRONTEND_GOOGLE_API_KEY;
+
+export default function Index() {
+  const position = { lat: 35.689501375244, lng: 139.69173371705 };
+
+  return (
+    <div style={{ width: "100%", height: "100vh" }}>
+      <APIProvider apiKey={API_KEY}>
+        <GoogleMap
+          defaultCenter={position}
+          defaultZoom={14}
+          mapId={"DEMO_MAP_ID"}
+          style={{ width: "100%", height: "100%" }}
+        >
+          <AdvancedMarker position={position} />
+        </GoogleMap>
+      </APIProvider>
+    </div>
+  );
+}

src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly FRONTEND_GOOGLE_API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

vite.config.ts

@@ -6,4 +6,5 @@ import tsconfigPaths from "vite-tsconfig-paths";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [TanStackRouterVite(), react(), tsconfigPaths()],
+  envPrefix: "FRONTEND_",
 });