googleMaps not server-side rendered on next.js

[Olgoetz]

Describe the bug 🐛

Server side rendering is not working in next.js as the apikey is not loaded. This is the error message

Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Client-side rendering works like a charm

To Reproduce 🔍

Steps to reproduce the behavior:

Look here https://novotec-btim8meyu-olgoetz.vercel.app/kontakt
and open the dev console

Expected behavior 💭

GoogleMaps successfully rendered on the server

Screenshots 🖥

see link

Environment:

• OS: mac
• Browser chrome
• Version 116.0.5845.14

Additional context

Add any other context about the problem here.

[yss14]

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

[Legym]

I just ran into this issue with nextjs 14. Anyone have any luck?

[moustafa1993]

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.