Component/Marker always re-center after map interaction

[tao-qian]

Hi! It seems like the custom React component drawn on the map is always centered on the map (instead of being pinned to a particular location on the map and moving with the map), even when I change the map view through dragging/zooming.

This is not reproducible in the JS Bin examples, but I after I copy the same code to a local project (freshly created with create-react-app), it would be reproducible.

Here is a code snippet I used for testing:

import GoogleMapReact from "google-map-react";

function App() {
  return (
    <div className="App">
     <div style={{ height: "500px", width: "500px" }}>
        <GoogleMapReact
        defaultCenter={{lat:61.955413, lng:30.337844}}
        zoom={10}>
        <div  
            style={{
                width: "40px",
                padding: "20px",
                border: "1px solid blue",
                background: "red",
                color: "yellow", 
            }}
            lat={61.955413} 
            lng={30.337844}
        >MyPlace</div>
        </GoogleMapReact>
    </div>
    </div>
  );
}

export default App;

To Reproduce 🔍

Steps to reproduce the behavior:

1. Create a new app with create-react-app
2. Install with npm install google-map-react --save
3. Replace the content of App.js with the snippet above
4. In the rendered page, zoom in/out, or drag around to change the map view
5. The "MyPlace" marker will snap back to the center of the map view after each interaction.

Expected behavior 💭

The "MyPlace" marker should move with the map view.

Screenshots 🖥

If applicable, add screenshots to help explain your problem.

Environment:

• OS: mac
• Browser chrome and safari
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

[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>
      }
    </>
  )

[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

[tao-qian]

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

[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.

[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.

[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.

[pradeep90043]

I solved this issue in Index.js. import ReactDom from "react-dom" instead of "react-dom/client"

[alejandroch1202]

This does not work in development because of the React.StrictMode, but when you build it works good. At least for me.