Markers are jumping #1143

pdwrl · 2022-09-07T18:58:05Z

Hello.
Markers are jumping only when navigating the map by mouse's dran'n'drop. They appears on their old places for a short time and then showing on a right places.
Strange: It doesn't reproduces on Codesandbox.

Any ideas please?

maps.mp4

itsmichaeldiego · 2022-09-08T00:39:50Z

@pdwrl Could you provide an example of your code, and which version of this library you're using?

Exilent-aby · 2022-09-08T06:03:34Z

@pdwrl @itsmichaeldiego
I have forked @pdwrl 's codesandbox to use the new renderer for React 18. The markers can be seen jumping there.
Link to the fork
@pdwrl FYI: I changed the Index.js to this:

import React from "react";
import {createRoot} from "react-dom/client";
import SimpleMap from "./Map";
import { BrowserRouter, Link, Route } from "react-router-dom";
import "./styles.css";
const locations = require("./locations.json");

function App() {
  return (
    <div className="App">
      <SimpleMap locations={locations} />
    </div>
  );
}

const container = document.getElementById("root");
const rootElement = createRoot(container);
rootElement.render(<App/>);

pdwrl · 2022-09-08T07:13:05Z

@Exilent-aby yes, Your fork reproduces the jumping.
Thank You very much.

pdwrl · 2022-09-08T08:01:15Z

@itsmichaeldiego please, look at this sandbox
bug reproduces here.
thanks to @Exilent-aby

EugeniaSSS · 2022-09-08T13:03:08Z

@pdwrl, I have the same problem! SOS

adrian-koczen · 2022-09-08T13:17:31Z

I agree, It would be nice to make this work again 😀

Exilent-aby · 2022-09-08T17:15:04Z

@pdwrl For now, I have downgraded to react 17 to make it work for my case. Personally, I don't want to move away from this library, as I found this to be the most straightforward approach to implementing google maps in react so far.

pdwrl · 2022-09-09T08:54:10Z

downgraded to react 17

oh, I can't downgrade.
anyway, thank You so much.

Exilent-aby · 2022-09-12T07:12:38Z

This problem seems to be happening in many implementations of Google Maps with react. The official google map react wrapper (@googlemaps/react-wrapper) has this demo listed in their documentation on npmjs.com. But they too seem to be using ReactDom.render with react 18 to make it work, at least this is what the console shows.

We might have to wait a little longer for this issue to be fixed.

kkallasm · 2022-09-15T11:02:23Z

Same problem here. Any updates?

JonasRothmann · 2022-09-27T11:08:50Z

Same problem. We use React 18 in production and can't downgrade.

mcgrealife · 2022-10-05T23:13:50Z

A PR by @bordeo addresses this, but needs review and approval

giorgiabosello · 2022-10-06T05:47:05Z

@mcgrealife the PR of @bordeo address issues with react 18, but I've found out that something else happens:
markers are not being reinitialized, so, or you can't see them on the map, since they have wrong style positions, or they move with the map.
I have tried to fix it, but it's like a matrioska. I'm implementing maps with the official library (@googlemaps/react-wrapper) since I cannot downgrade to react 17 too.

Eslam3bed · 2022-10-07T03:26:47Z

Experiencing the same issue when upgraded to react 18 `-_-`

When I turn the StrictMode on the app crashes

haabnaseem · 2022-10-07T21:54:41Z

NextJS with React 18, same bug

haabnaseem · 2022-10-09T09:49:03Z

NextJS with React 18, same bug

@pdwrl can you make your lat, lng values are present? i had one marker which was missing lng value and when I fixed that markers didn't jump anymore.

Eslam3bed · 2022-10-09T09:52:27Z

@haabnaseem Can you explain more, these details are mandatory, we do provide them, however, we still face the same issue,
can you explain more about your findings?
Thanks

ilan-belfer · 2022-10-11T07:49:31Z

React 18. Same bug

googleMapReact18Bug.mp4

mcgrealife · 2022-10-12T00:41:37Z

@giorgiabosello ah I see.

The new google maps beta "Advanced Markers" look promising for most cases. I imagine these play well with the official @googlemaps/react-wrapper.

giorgiabosello · 2022-10-12T05:40:49Z

@mcgrealife at the end, I didn't use the official @googlemaps/reactwrapper, since it is only a wrapper that calls the API script. It doesn't accept markers as react components, but only the default one.
I've followed this guide.

AndreiFVPopa · 2022-10-20T14:07:24Z

Hey there guys.
I've been struggling with this bug a lot also. It definitely needs a fix asap.
I temporarily found a workaround. I used an opacity state transition. With the help of drag and dragEnd, I managed to hide the dots while the flickering is happening.
const [opacity, setOpacity] = useState(1) ... <GoogleMapReact onDrag={() => setOpacity(0)} onDragEnd={() => setOpacity(1)} > <Marker style={{opacity: opacity}}>1</Marker> </GoogleMapReact>

yakushstanislav · 2022-10-20T20:07:12Z

Same problem.

xwg2015 · 2022-10-28T05:15:50Z

Same problem.

Naught0 · 2022-11-03T23:40:41Z

Any word on what's causing this? Why does reverting to react 17 fix it?

giorgiabosello · 2022-11-04T06:07:24Z

Any word on what's causing this? Why does reverting to react 17 fix it?

@Naught0 because React 18, in developer mode, mount and unmount the component to make some tests.

Gigiz · 2022-11-11T11:35:03Z

Any word on what's causing this? Why does reverting to react 17 fix it?

@Naught0 because React 18, in developer mode, mount and unmount the component to make some tests.

Nope, i tried in production mode but this behaviour still present

JavierSolis · 2022-11-16T18:10:33Z

You can use the parameter onGoogleApiLoaded, to have the reference to the map and add the markers, these markers will not have the problem

. . . 
const renderPolylines =  (map, maps) => {
        //places is an object array with latitude and longitude
        places.map(place => {
            new maps.Marker({
                position: {
                    lat: place.lat,
                    lng: place.lng,
                },
                map,
            });})

        var bounds = new maps.LatLngBounds()
        for (let place of places) {
            bounds.extend(
                new maps.LatLng(place.lat, place.lng)
            )
        }
        map.fitBounds(bounds)
    }

. . .
<GoogleMapReact
                    bootstrapURLKeys={{key: "API_KEY"}}
                    defaultCenter={location}
                    defaultZoom={zoomLevel}
                    onGoogleApiLoaded={({map, maps}) => renderPolylines(map, maps)}>

. . .

giorgiabosello · 2022-11-18T21:30:51Z

I've made a repository myself which is working with React 18. I've abandoned this one, since it seems it is not maintained anymore.
LINK

alehano · 2022-11-19T17:51:34Z

I've made a repository myself which is working with React 18. I've abandoned this one, since it seems it is not maintained anymore. LINK

Thanks, finally it's working

sukhovv · 2023-02-28T13:17:57Z

I've made a repository myself which is working with React 18. I've abandoned this one, since it seems it is not maintained anymore. LINK

@giorgiabosello What about draggable markers in there? Looks like it is not supported in the same way with draggable + onChildMouseUp + onChildMouseMove props

giorgiabosello · 2023-02-28T14:02:21Z

I've made a repository myself which is working with React 18. I've abandoned this one, since it seems it is not maintained anymore. LINK

@giorgiabosello What about draggable markers in there? Looks like it is not supported in the same way with draggable + onChildMouseUp + onChildMouseMove props

Not managed, if you want to help with a PR, it's appreciated :)

neo0910 · 2023-04-11T09:12:15Z

@itsmichaeldiego

Hello, I have this problem on my project (React 18, google-map-react 2.2.0). Will the PR of bordeo be merged?

giorgiabosello · 2023-04-11T09:17:39Z

@neo0910 this PR fixes some things, but breaks some others.
If you don't need everything that's supported in this library, check Google Maps React Markers.

Lamanris · 2023-04-12T11:32:11Z

2023, the bug still exists

Lamanris · 2023-04-12T11:50:20Z

I've made a repository myself which is working with React 18. I've abandoned this one, since it seems it is not maintained anymore. LINK

Thank you!

bradley-varol · 2023-04-12T14:00:48Z

For anyone coming here, I highly recommend the repo linked above. We have fairly easily migrated with only some changes (e.g. onDragEnd had to be implemented manually):

  const onGoogleApiLoaded = ({ map }) => {
    mapRef.current = map
    mapRef.current.addListener('drag', onDrag)
    mapRef.current.addListener('dragend', onDragEnd)
  }

  <GoogleMapReact
          apiKey={apiKey}
          onGoogleApiLoaded={onGoogleApiLoaded}

and there's no reactive center prop so you have to call setCenter yourself:

  useEffect(() => {
    if (mapRef.current) {
      // set map location programmatically when the mapCenter var changes
      mapRef.current.setCenter(mapCenter)
    }
  }, [mapRef, dispatch, mapCenter])

anabel29 · 2023-05-05T18:10:25Z

Same issue :( any updates?

ghost · 2023-05-16T12:11:51Z

Same Issue

ghost · 2023-05-16T12:21:08Z

import React from 'react';
import ReactDOM from 'react-dom';
import { CssVarsProvider } from '@mui/joy/styles';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import { persistor, store } from 'tools/store';
import theme from 'tools/theme';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import './styles.css';

ReactDOM.render(
<React.StrictMode>

</React.StrictMode>,
document.getElementById('root')
);

use this in your index.tsx/js it will act as react 17 and fix this bug

sukhovv · 2023-05-31T08:01:00Z

@itsmichaeldiego great to know the library is still alive.
any chance this issue will be fixed?

tvNitesh · 2023-05-31T13:45:06Z

same Issue :( , any update ?

render map and marker. Note issue where marker moves around on rerenders: google-map-react/google-map-react#1143

Mu-Aleem · 2023-06-04T08:31:07Z

same issue when i drap the map my current location marker moves. how can i fix this i,m using the react 18 and google-map-react

giorgiabosello · 2023-06-04T08:56:22Z

Guys, there isn't a fix for this issue. It is how React18 works on developer mode.
You shouldn't have problems in production mode.
This library needs to be completely rewritten to work with R18+, I tried to to fix it but it was like a matrioska problem, so I coded from zero a library.
Google Maps React Markers

Mu-Aleem · 2023-06-04T09:09:44Z

Guys, there isn't a fix for this issue. It is how React18 works on developer mode. You shouldn't have problems in production mode. This library needs to be completely rewritten to work with R18+, I tried to to fix it but it was like a matrioska problem, so I coded from zero a library. Google Maps React Markers

what do you suggest? I want to add the map the same as Uber.

giorgiabosello · 2023-06-04T09:22:06Z

Guys, there isn't a fix for this issue. It is how React18 works on developer mode. You shouldn't have problems in production mode. This library needs to be completely rewritten to work with R18+, I tried to to fix it but it was like a matrioska problem, so I coded from zero a library. Google Maps React Markers

what do you suggest? I want to add the map the same as Uber.

@Mu-Aleem there isn't much you can do:

keep this library and use it only on production mode
code from zero another one, using Google Maps API
use mine (mentioned above) and integrate with a PR what you think is missing and should be available to everyone.

rise2vados · 2023-07-07T14:20:17Z

Guys, there isn't a fix for this issue. It is how React18 works on developer mode. You shouldn't have problems in production mode. This library needs to be completely rewritten to work with R18+, I tried to to fix it but it was like a matrioska problem, so I coded from zero a library. Google Maps React Markers

giorgiabosello, first of all, thank you for using google-maps-react-markers. Everything works well without any jumps or flickers, but I have a need to change the center of the map after clicking on a marker. How can I achieve this? Thank you once again.

giorgiabosello · 2023-07-07T14:25:43Z

@rise2vados this isn't the right thread. There's a discussion in the repository asking the same thing. Check there and you'll find your answer. :)

yusufkhaled-DC · 2023-07-28T17:06:37Z

I've made a repository myself which is working with React 18. I've abandoned this one, since it seems it is not maintained anymore. LINK

You're amazing!!! Thank you so much

hoangviet1807 · 2023-10-02T08:52:52Z

Any updates???

HelloNeptune · 2023-12-05T14:36:53Z

Any updates???

#1197 (comment) this may help, give a try

karimtamerBW · 2023-12-07T09:34:58Z

Any new updates please?

stevengrimaldo · 2024-03-15T20:08:52Z

still an issue 2024 even though their last release says supporting react 18, so i dont think react 18 had anything to do with it maybe @giorgiabosello.

giorgiabosello · 2024-03-15T20:17:00Z

still an issue 2024 even though their last release says supporting react 18, so i dont think react 18 had anything to do with it maybe @giorgiabosello.

Yes, it does! Because it mounts and remounts the components, and the library doesn't work. It's old.

stevengrimaldo · 2024-03-15T20:32:17Z

still an issue 2024 even though their last release says supporting react 18, so i dont think react 18 had anything to do with it maybe @giorgiabosello.

Yes, it does! Because it mounts and remounts the components, and the library doesn't work. It's old.

the library is old yes, the library works but still has the jumpiness as you mentioned.

Hosar · 2024-04-23T23:52:10Z

2024, and still the same problem 🫠
Thanks @giorgiabosello for your solution 👍

wpwilson10 added a commit to wpwilson10/PatrickWilsonSite that referenced this issue Jun 3, 2023

MVP

45a41e9

render map and marker. Note issue where marker moves around on rerenders: google-map-react/google-map-react#1143

wpwilson10 mentioned this issue Jun 3, 2023

Map Markers Moving wpwilson10/PatrickWilsonSite#12

Open

DominicInapt mentioned this issue Dec 5, 2023

Map markers jump when dragging WVU-CS230-2023-08-Group01/GeoCooker#2

Open

1 task

Markers are jumping #1143

Markers are jumping #1143

Comments

pdwrl commented Sep 7, 2022 • edited

itsmichaeldiego commented Sep 8, 2022

Exilent-aby commented Sep 8, 2022 • edited

pdwrl commented Sep 8, 2022

pdwrl commented Sep 8, 2022

EugeniaSSS commented Sep 8, 2022 • edited

adrian-koczen commented Sep 8, 2022

Exilent-aby commented Sep 8, 2022

pdwrl commented Sep 9, 2022

Exilent-aby commented Sep 12, 2022

kkallasm commented Sep 15, 2022

JonasRothmann commented Sep 27, 2022

mcgrealife commented Oct 5, 2022

giorgiabosello commented Oct 6, 2022

Eslam3bed commented Oct 7, 2022

Experiencing the same issue when upgraded to react 18 -_-

haabnaseem commented Oct 7, 2022

haabnaseem commented Oct 9, 2022

Eslam3bed commented Oct 9, 2022

ilan-belfer commented Oct 11, 2022

mcgrealife commented Oct 12, 2022

giorgiabosello commented Oct 12, 2022

AndreiFVPopa commented Oct 20, 2022 • edited

yakushstanislav commented Oct 20, 2022

xwg2015 commented Oct 28, 2022

Naught0 commented Nov 3, 2022

giorgiabosello commented Nov 4, 2022

Gigiz commented Nov 11, 2022

JavierSolis commented Nov 16, 2022

giorgiabosello commented Nov 18, 2022

alehano commented Nov 19, 2022

sukhovv commented Feb 28, 2023

giorgiabosello commented Feb 28, 2023

neo0910 commented Apr 11, 2023 • edited

giorgiabosello commented Apr 11, 2023

Lamanris commented Apr 12, 2023

Lamanris commented Apr 12, 2023

bradley-varol commented Apr 12, 2023 • edited

anabel29 commented May 5, 2023

ghost commented May 16, 2023

ghost commented May 16, 2023 • edited by ghost

sukhovv commented May 31, 2023

tvNitesh commented May 31, 2023

Mu-Aleem commented Jun 4, 2023

giorgiabosello commented Jun 4, 2023

Mu-Aleem commented Jun 4, 2023

giorgiabosello commented Jun 4, 2023 • edited

rise2vados commented Jul 7, 2023

giorgiabosello commented Jul 7, 2023

yusufkhaled-DC commented Jul 28, 2023

hoangviet1807 commented Oct 2, 2023

HelloNeptune commented Dec 5, 2023 • edited

karimtamerBW commented Dec 7, 2023

stevengrimaldo commented Mar 15, 2024

giorgiabosello commented Mar 15, 2024

stevengrimaldo commented Mar 15, 2024

Hosar commented Apr 23, 2024

pdwrl commented Sep 7, 2022 •

edited

Exilent-aby commented Sep 8, 2022 •

edited

EugeniaSSS commented Sep 8, 2022 •

edited

Experiencing the same issue when upgraded to react 18 `-_-`

AndreiFVPopa commented Oct 20, 2022 •

edited

neo0910 commented Apr 11, 2023 •

edited

bradley-varol commented Apr 12, 2023 •

edited

ghost commented May 16, 2023 •

edited by ghost

giorgiabosello commented Jun 4, 2023 •

edited

HelloNeptune commented Dec 5, 2023 •

edited