New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
googleMaps not server-side rendered on next.js #1198
Comments
Same here. Tried to render the initial map view within a server side component with nextjs 13, but received the following error:
|
I just ran into this issue with nextjs 14. Anyone have any luck? |
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: // ... const MapComponent = () => { const center = { if (!isLoaded) { Loading... ; // or any loading indicator of your choice} return ( // ... // 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. |
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:
Additional context
Add any other context about the problem here.
The text was updated successfully, but these errors were encountered: