Marker not showing in Next/React App | REACT Google Map API

Fixing Marker component

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 and above, 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')
);

to

ReactDOM.render(
    <App />
  document.getElementById('root')
);

Removing StrictMode from NextJS

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

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