Laggy map movement

[katrhss]

I can't figure out why the camera movement is snappy/laggy. This happens both on phones and laptops, and both on the development server and the actual build.
You can see a preview of what I mean down below. Zoom works as intended but as you can see camera movement stops by itself after some small distance.

Recording.2024-06-18.143726.mp4

My Map Component settings are the following:

<Map
    defaultCenter={{ lat: 40.50264461491976, lng: 21.254546302809793 }} 
    defaultZoom={13} 
    gestureHandling={"greedy"} 
    disableDefaultUI={true} 
    heading={-90}
    mapId={MAP_ID} 
>

Any help would be appreciated!

[usefulthink]

This might have to do with the heading prop, can you try defaultHeading instead? That shouldn't actually matter since you're not using a mapId, so heading and tilt aren't supported on your map.

EDIT just noticed that you are indeed using a mapId and probably a map with heading/tilt enabled as well.

[katrhss]

Thank you very much, that worked wonders! Really appreciate it!

[usefulthink]

Still, that's something that should actually work without those problems. If you actually need to restrict the heading, maybe map.setHeadingInteractionEnabled() could help.

[katrhss]

@usefulthink Something new that came up with the change you said from heading to defaultHeading is that if I click on a marker, then the map rotates to its default rotation. Do you think the map.setHeadingInteractionEnabled() will fix that? If so, could you walk me through on how I could implement it because I'm kinda new to this kind of thing.

[usefulthink]

Do you think the map.setHeadingInteractionEnabled() will fix that?

I don't know. It might do that.

Basically, since there's no react-props API for this, you need to get access to the Map instance and call that method yourself. This would be something like this in your map component:

const map = useMap();
useEffect(() => {
  if (!map) return;

  map.setHeadingInteractionEnabled(false);
}, [map]);

[katrhss]

It's still doing it. I've attached a video down below to see exactly what is happening. If you have anything in mind that might fix this please let me know. Thank you in advance!

Recording.2024-06-21.161738.mp4