search

JustFly1984 / react-google-maps-api

React Google Maps API
MIT License
1.82k stars 439 forks source link

Markers dissapear after refresh #3048

Closed SimeriaIonut closed 2 years ago

SimeriaIonut commented 2 years ago

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 commented 2 years ago

@SimeriaIonut import MarkerF instead of Marker

SimeriaIonut commented 2 years ago

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

JustFly1984 commented 2 years ago

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

toddjudd commented 1 year ago

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

HelloAyan commented 1 year ago

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

YohannesTz commented 1 year ago

thank you. you have saved me hours!

salorsino commented 1 year ago

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 commented 1 year ago

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

ezejerez commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.