Markers dissapear after refresh

[SimeriaIonut]

Your Environment

os: MacOS

node --version: v14.19.3

react version: 18.1.0

webpack version: N/A

@babel version: N/A

@react-google-maps/api version: 2.12.0

How does it behave?

The marker dissapears after page refresh.

How should it behave correctly?

The marker should not dissapear after page refresh

Basic implementation of incorrect behavior in codesandbox.com

https://codesandbox.io/s/react-google-maps-api-issue-7meur1

[JustFly1984]

@SimeriaIonut import MarkerF instead of Marker

[SimeriaIonut]

Thanks, will do. Is there a reason for using MarkerF instead of Marker?

[JustFly1984]

yes. MarkerF is functional component vs class based Marker component, which does not work with react Strict and/or react@17+

[toddjudd]

Looks like MarkerClusterer has the same issue, but is not solved by using the MarkerClustererF version.

[HelloAyan]

I also faced the same issue. After using MarkerF component instead of Marker component it's working on my web application.

[YohannesTz]

thank you. you have saved me hours!

[salorsino]

This took me a few hours to find, but this is the correct answer.

I had a project with a sample repo that was using Next 12 and React 17, then I went to create my own project using npx create-next-app and that creates it with Next 13 and React 18, and then I began seeing the Marker issue.

Removing reactStrictMode: true from next.config.js and using MarkerF and MarkerClusterF solved my issues

[nkechr1s]

I was trying two the days to fix that issue, thank you!

[ezejerez]

Hi, I'm facing the same issue and using I've solved it, but the problem is that is a memoized Component, so if I try to use the "icon" prop in order to use a custom Marker icon and I want to dinamically change it's fillColor, the memoized component (MarkerF) does not work as expected. The same example works just fine using , but refresing the page all the markers disappear.

[SirBob01]

Hello, I'm facing the same issue as @ezejerez. the MarkerF component no longer rerenders when I change the properties of the 'icon' prop. Is there a fix for this?

[EliseiNicolae]

I've the same problem. I tried using MarkerF and MarkerClustererF, but is not working - after a few refreshes / hard refresh I can't see the markers.

This is happening just in dev mode, In production mode I can't reproduce.

[hamzapaskingakhtar1999]

This took me a few hours to find, but this is the correct answer.

I had a project with a sample repo that was using Next 12 and React 17, then I went to create my own project using npx create-next-app and that creates it with Next 13 and React 18, and then I began seeing the Marker issue.

Removing reactStrictMode: true from next.config.js and using MarkerF and MarkerClusterF solved my issues

I really don't understand the reason behind removing reactStrictMode but it worked. The map shows even after refresh.