Component/Marker always re-center after map interaction about google-map-react

[shellbryson]

Update: I notice further back in the issues someone posted a link to their fork. It has almost identical functionality, but doesn't appear to suffer the issue described above:

https://github.com/giorgiabosello/google-maps-react-markers

[apurvjha123]

@shellbryson @tao-qian @jarlnartey @Fullbusters @thinhnuine I have face the same issue and debugged literally 8+ hrs , And finally I found out just remove restrictmode from index.js in react

From :-

  <React.StrictMode>
    <App />
  </React.StrictMode>
);```

To:-

```root.render(

    <App />

);```

Happy Hacking !

[shellbryson]

A word of caution: Strict mode is there for a reason and disabling it not a risk worth taking in a production app, in my opinion.

[tao-qian]

Thanks! Switched to https://github.com/giorgiabosello/google-maps-react-markers and it worked well for me so far!

[shellbryson]

I'm having the same issue: Spent hours trying to figure out why this doesn't work. Any markers place on the map do drag when the map is moved or zoomed, but soon as the action stops, the marker components reposition themselves at their initial position (that is, relative to viewport, rather than relative to the map).

const styleMap={
  display: "block",
  position: "relative",
  marginTop: "2rem",
  width: "100%",
  height: "90vh",
  overflow: "hidden",
}

const pinStyle = {

}

const LocationPin = ({ text }) => (
  <div style={ pinStyle }>
    <PushPinOutlinedIcon />
    <p className="">{text}</p>
  </div>
)

export default function MapView() {

  const [locations, setLocations] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);

  const q = query(collection(db, "locations"));

  const getLocations = async () => {
    const querySnapshot = await getDocs(q);
    const l = [];
    querySnapshot.forEach((doc) => {
      l.push({
        ...doc.data(),
        id: doc.id
      });
    });
    console.log("ESFF: loaded locations", l);
    setLocations(l);
    setIsLoaded(true)
  }

  useEffect(() => {
    getLocations();
  }, [])

  const defaultLocation = {
    center: {
      lat: 55.9579741,
      lng: -3.1966372,
    },
    zoom: 13
  }

  return (
    <>
      { isLoaded &&
        <Box style={styleMap}>
          <GoogleMapReact
            bootstrapURLKeys={{ key: import.meta.env.VITE_GOOGLEMAPS_API_KEY }}
            yesIWantToUseGoogleMapApiInternals
            defaultCenter={defaultLocation.center}
            defaultZoom={defaultLocation.zoom}>

            {locations.map((place) => (
              <LocationPin
                key={place.id}
                text={place.title}
                lat={parseFloat(place.lat)}
                lng={parseFloat(place.lng)}
              />
            ))}

          </GoogleMapReact>
        </Box>
      }
    </>
  )

[Fullbusters]

Any updates/fixes?

[GowriSh1393]

any fixes?

[thinhnuine]

Same issue

[MahourPriyanka]

Facing same issue

[jarlnartey]

Same issue. Follwing...

[shellbryson]

Use the forked project mentioned above. That works.

[juancarloselorriaga]

Any update? Following...

[apurvjha123]

A word of caution: Strict mode is there for a reason and disabling it not a risk worth taking in a production app, in my opinion.

True , This is a major issue , But this repo is not active now.

[vx17rt]

The best solution here is to switch to the best map library - Mapbox. However, if you're forced to use google maps like me - the only option is to use their official react-wrapper library and forget about declarative React API

[anayagaray98]

This was my solution: https://github.com/giorgiabosello/google-maps-react-markers

[mxmzb]

I have this with Next.js in dev mode. When I build the app and run the production build, it works fine. Maybe it has to do with some reload mechanism that is employed only in dev mode.

[stephen-simone]

I have this with Next.js in dev mode. When I build the app and run the production build, it works fine. Maybe it has to do with some reload mechanism that is employed only in dev mode.

This seems to have solved my issue. It appears to be related to hot reloading in NextJs.