DEV Community

vatana7
vatana7

Posted on

Marker not showing in Next/React App | @react-google-maps/api

Fixing Marker component

Npm Package: @react-google-maps/api

I was working with React Google Map Api today and I found myself figuring and scratching my head on why wasn't the Marker showing up on the app? I configured literally everything on the file that I was working on and that included: checking Google Map API, rechecking all the code, rechecking typos, rechecking imports.

All that but it still doesn't work. And you know what's worse? When I try to console.log(), the Marker component just randomly show up and it made me question myself and the code that I was writing.

Anyway, if your React/NextJS project has React version of 18, it turns out you have to remove StrictMode from your project in order for the Marker component to show up.

Removing StrictMode from ReactJS

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
Enter fullscreen mode Exit fullscreen mode

to

ReactDOM.render(
    <App />
  document.getElementById('root')
);
Enter fullscreen mode Exit fullscreen mode

Removing StrictMode from NextJS

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false
}
Enter fullscreen mode Exit fullscreen mode

After that your code should work and the Marker component should appear!

Top comments (8)

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • Edited

This seems an issue on the lib you used rather than an issue in your application.

Disabling strict mode is a no-go solution to me, maybe we need to check this lib to find the error.

Can you please provide your package.json to see the dependencies and their versions?

Can you also please try to put back the strict mode and run the app "production-like" to see if the issue apears just on development or if it does appear in production as well?

(If you've the app in a public repo that will do).

Thank you!

Collapse
 
vatana7 profile image
vatana7

"@react-google-maps/api": "^2.12.1" is the version of the package I am currently using. Unfortunately I cannot share this repo because it's my company's code but I've tried running build with strictmode on and surprisingly work! Thanks!

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

😂😂 something else you did make it work, wondering what

Collapse
 
kingmohbil profile image
Mohammad Alwazzan • Edited

It seems to be a development issue, in production mode the marker is visible because Next-JS disables react strict mode in production.

Collapse
 
rahul72925 profile image
Rahul Khatri

Hey,
It seems interesting. May I know which package you were using for map?

Collapse
 
vatana7 profile image
vatana7 • Edited
Collapse
 
rahul72925 profile image
Rahul Khatri

This is strange. I'm also using this package in my nextjs project but I did't do any thing with reactStrictMode🤔.

Thread Thread
 
vatana7 profile image
vatana7

If your nextjs project has react version below 18 it'll be fine.