googleMaps not server-side rendered on next.js  #1198

Activity

1. yss14 commented on Sep 30, 2023

   

   yss14

   on Sep 30, 2023

   More actions

   Same here. Tried to render the initial map view within a server side component with nextjs 13, but received the following error:

   Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
       at l (webpack-internal:///(:3001/rsc)/./node_modules/.pnpm/google-map-react@2.2.1_react-dom@18.2.0_react@18.2.0/node_modules/google-map-react/dist/index.js:17:35)
       at eval (webpack-internal:///(:3001/rsc)/./node_modules/.pnpm/google-map-react@2.2.1_react-dom@18.2.0_react@18.2.0/node_modules/google-map-react/dist/index.js:37:5)
       at eval (webpack-internal:///(:3001/rsc)/./node_modules/.pnpm/google-map-react@2.2.1_react-dom@18.2.0_react@18.2.0/node_modules/google-map-react/dist/index.js:47:2)
       at (rsc)/./node_modules/.pnpm/google-map-react@2.2.1_react-dom@18.2.0_react@18.2.0/node_modules/google-map-react/dist/index.js (:3001/<projectPath>/.next/server/vendor-chunks/google-map-react@2.2.1_react-dom@18.2.0_react@18.2.0.js:20:1)
       at __webpack_require__ (:3001/<projectPath>/.next/server/webpack-runtime.js:33:43)
       at eval (webpack-internal:///(:3001/rsc)/./src/client-components/GoogleMap.tsx:8:74)
       at (rsc)/./src/client-components/GoogleMap.tsx (:3001/<projectPath>/.next/server/app/page.js:205:1)
       at __webpack_require__ (:3001/<projectPath>/.next/server/webpack-runtime.js:33:43)
       at eval (webpack-internal:///(:3001/rsc)/./src/app/page.tsx:12:86)
       at (rsc)/./src/app/page.tsx (:3001/<projectPath>/.next/server/app/page.js:194:1)
       at Function.__webpack_require__ (:3001/<projectPath>/.next/server/webpack-runtime.js:33:43)
       at async eh (:3001/<projectPath>/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:22:152341)
       at async ek (:3001/<projectPath>/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:24:72156)
       at async :3001/<projectPath>/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:24:74187
       at async Promise.all (:3001/index 0)
       at async ek (:3001/<projectPath>/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:24:73954)
       at async :3001/<projectPath>/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:24:76201
   
2. Legym commented on Dec 8, 2023

   

   Legym

   on Dec 8, 2023

   More actions

   I just ran into this issue with nextjs 14. Anyone have any luck?
3. moustafa1993 commented on Jan 7, 2024

   

   moustafa1993

   on Jan 7, 2024

   More actions

   I wanted to share a solution for a bug related to loading a page and initializing a map. To address this issue, it's essential to await the page to be fully loaded before initializing the map. A helpful approach is to use the useLoadScript hook along with the GoogleMap component from the react-google-maps/api library.

   Here's an example implementation:
   import { GoogleMap, Marker, useLoadScript } from '@react-google-maps/api';

   // ...

   const MapComponent = () => {
   const { isLoaded } = useLoadScript({
   googleMapsApiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY as string,
   });

   const center = {
   lat: // Your latitude,
   lng: // Your longitude,
   };

   if (!isLoaded) {
   return

   Loading...

   ; // or any loading indicator of your choice
   }

   return (
   <GoogleMap
   mapContainerClassName="map-container"
   center={center}
   zoom={15}
   options={{
   streetViewControl: false,
   mapTypeControl: false,
   fullscreenControl: false,
   zoomControl: true,
   scaleControl: false,
   }}
   >
   <Marker
   position={{
   lat: center.lat,
   lng: center.lng,
   }}
   // Additional MarkerF props or customization
   />
   
   );
   };

   // ...

   // Use the MapComponent in your application where needed

   This solution ensures that the page is fully loaded before attempting to initialize the map, preventing the mentioned bug. Feel free to adapt the code to your specific use case and customize the map settings as needed.

   👍React with 👍1Reacted by Phong