Markers flicker when scrolling on the map

[CrissAlvarezH]

When the map is scrolled and the mouse is released, the markers blink from where they were initially positioned.

The code

import React from "react";
import GoogleMapReact from 'google-map-react';


const AnyReactComponent = ({ text }) => (
    <div style={{
        width: "70px",
        backgroundColor: "black",
        color: "white",
        padding: 2,
        textAlign: "center"
    }}>
        {text}
    </div>
);

const center =     {
    lat: 8.789109769101659,
    lng: -75.85785616189241,
}

const zoom = 17

export default function SimpleMap(){
  console.log("simple map render")
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: THE_KEY }}
        defaultCenter={center}
        defaultZoom={zoom}
      >
        <AnyReactComponent
            lat={center.lat}
            lng={center.lng}
            text="My Marker"
            />
      </GoogleMapReact>
    </div>
  );
}

Screenshots 🖥
IMPORTANT: It always happens, in this gif it only happens the first two times, but it's because when converting video to gif the quality drops

Environment:

• OS: windows
• Browser chrome, mozilla, etc.
• google-map-react: 2.1.10
• react 18.1.0

[icastillejogomez]

It occurs by React 18. You probably are avoiding the library peerDependencies that recommend still using react 17

[tmilciunas]

Same thing happens in my project, with "react": "17.0.2" and "google-map-react": "^2.1.10".

Marker has this class on it, to offset it to the center:

.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  text-align: center;
}

Still jiggles when moving the map.

[marcosmarp]

Any news on this? I switched from createRoot to ReactDOM.render on my index so React would still behave as v17 but I would really like to switch back.

[Mateusz-Podemski-Forte-Digital]

I have the same problem.
It happens when I move a map using mouse or when I change center prop.

[SorcRR]

Same issue when using react 18 with createRoot.
For now i'm using ReactDOM.render instead of createRoot, this solved the flickering issue, but would like to switch back also.
Let me know when a solution for this is available. Thanks.

[guspatagonico]

First: Congrats for @istarkov and all the contributors for this great component.

I have the same problem. It happens when I move a map using mouse or when I change center prop.

I'm facing the same issue and I tried several workarounds.

I've finished showing a "distractive" div overlay with a color and a message inside the map's container that shows up when the dragend mouse event is triggered (just before the markers flicker and lasts for 300ms).

20220612.google-map-react.markers.flicker.issue.-.color.overlay.with.a.message.mp4

But... this is just a workaround, not a real solution.

Just in case someone is interested, I control overlay's visibility with "state - reducer" variables (I'm using useReducer, dispatcher, etc.) like this:

`
const handleApiLoaded = (map, maps) => {
mapRef.current = map;

const mapOptions = {
  disableDefaultUI: true,
  fullscreenControl: true,
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: maps.MapTypeControlStyle.DROPDOWN_MENU,
    mapTypeIds: ["roadmap", "terrain", "satellite", "hybrid"],
  },
};

map.setOptions(mapOptions);

map.addListener("dragstart", () => {
  // console.log("GoogleMapReact -> onDragStart");
  mapStateDispatch({
    type: "UPDATE",
    fieldName: "markersOpacity",
    payload: 0.6,
  });
});

map.addListener("dragend", () => {
  mapStateDispatch({
    type: "UPDATE",
    fieldName: "markersVisibility",
    payload: false,
  });
  mapStateDispatch({
    type: "UPDATE",
    fieldName: "waitState",
    payload: true,
  });
  mapStateDispatch({
    type: "UPDATE",
    fieldName: "markersOpacity",
    payload: 1,
  });
  console.log("GoogleMapReact -> onDragEnd");

  setTimeout(() => {
    console.log("onDragEnd after a while...");
    mapStateDispatch({
      type: "UPDATE",
      fieldName: "markersVisibility",
      payload: true,
    });
    mapStateDispatch({
      type: "UPDATE",
      fieldName: "waitState",
      payload: false,
    });
  }, 300);
});

};

`

I hope this could be fixed because I really want to keep on using the google-map-react component. I think this is a really great component, besides this issue.

Thank you.

[marcosmarp]

@guspatagonico the workaround i'm using is switching to react 17 for the moment.. sucks but it's what it's

pd: primera vez que me encuentro un argentino por aca... saludos desde caseros jajajaja

[guspatagonico]

@guspatagonico the workaround i'm using is switching to react 17 for the moment.. sucks but it's what it's

Hi Marcos! I considered that option but I'm trying to stick to an updated set of tools... and I'm such a stubborn ;-)

pd: primera vez que me encuentro un argentino por aca... saludos desde caseros jajajaja

Nice to meet you, che! ;-) I hope we could find a fix sooner or later. Best of luck!

[asdutoit]

Did anyone manage to find a solution to this?

[rvenky125]

Is there any solution or workaround?

[SorcRR]

Guys, load the app with ReactDOM.render and it wont flicker anymore

[Mateusz-Podemski-Forte-Digital]

Is that possible with Next.js 12.2?

[rvenky125]

Guys, load the app with ReactDOM.render and it wont flicker anymore

Can you place a code snippet here? I can't understand how can I pass state variables into it? In my case, the map component receives markers and center parameters and responds according to them.

[icastillejogomez]

Guys, @SorcRR proposal could be a workaround but definitely is not a valid long-term solution. Use this function it's essentially use the old React17 (and older) system.

For Next.js you have to downgrade to a Next.js version that use React 17. Definitely, not a valid solution.

This module need to be refactored in order to be compatible with React18 and concurrent renders.

[fedemoreira93]

@marcosmarp @guspatagonico bueno ahora somos 3 argentinos!

Did you guys find a solution (not a workaround)? I was using this library in older projects (react 16) and didn't have this problem but I don't want to downgrade my react app version...

Edit: After update to v2.2 it's still happening.