[Bug] mouse-movement not working when using some controlled props

[usefulthink]

Description

When controlled props are updated/restricted when handling the cameraChanged events, map can't be dragged anymore.

(source: #423)

Steps to Reproduce

https://codesandbox.io/p/devbox/snowy-dream-hnwmyh?file=%2Fsrc%2Fapp.tsx%3A19%2C1-20%2C1

Environment

• Library version: 1.1.0
• Google maps version: 3.57.4 (weekly)
• Browser and Version: any
• OS: any

Logs

No response

[shirleyodeng]

Hi, I am having this exact issue where I can't drag / interact with the map if I have controlled props and update them from the cameraChanged events. I saw this closed similar issue #436 that was created after this issue was opened so is this fixed? 🤔

[usefulthink]

@shirleyodeng Unfortunately not, and it seems this is going to be very hard to fix (if possible at all), but I am on it.

In the meantime, can you tell me what you are using the controlled props for? Maybe there are alternative solutions that work for your use-case.

[shirleyodeng]

Thanks for the speedy reply @usefulthink.

I have a map component which has either one or two markers. If it has two markers, I would it to center the map accordingly on load. You can see that I've used markerOne's coordinates for the center. So I saw that on load, it will trigger a MapCameraChangedEvent so I thought this would returns the center of the map of the two markers and then set the props accordingly. But maybe I'm approaching this incorrectly - is there a better way?

const [mapCenter, setMapCenter] = useState({ lat: markerOne.lat, lng: markerOne.lng })
const [mapZoom, setMapZoom] = useState(defaultZoom)

  <Map
    center={mapCenter}
    zoom={mapZoom}
    mapId="mapId"
    onCameraChanged={(event) => {
      setMapCenter(event.detail.center)
      setMapZoom(event.detail.zoom)
    }}
  >
    <AdvancedMarker position={{ lat: markerOne.lat, lng: markerOne.lng }} />
    {!!markerTwo && <AdvancedMarker position={{ lat: markerTwo.lat, lng: markerTwo.lng }} /> }
  </Map>

[usefulthink]

Oh, that might actually be a different issue that could be fixable. The details are a bit difficult to explain, but I think I have an Idea whats wrong there, I'll have a look into this.

What you could try is to use the full CameraState instead of just the zoom and center props, for example:

const INITIAL_CAMERA_STATE = {
  center: {lat: 0, lng: 0},
  zoom: 5,
  heading: 0,
  tilt: 0
};

const MapComponent = () => {
  const [cameraState, setCameraState] = useState(INITIAL_CAMERA_STATE);

  return (
    <Map {...cameraState} onCameraChanged={(ev) => setCameraState(ev.detail)}></Map>
  );
};

If you now want to update the camera-center without touching the zoom (same goes the other way around), you can use the state setter function like this:

const updateCenter = useCallback(newCenter => {
  setCameraState(prevCameraState => {
    return {...prevCameraState, center: newCenter};
  });
}, []);

Another alternative would be to use the defaultBounds prop of the map (if you know the positions of your markers at initialization time), or the imperative API (map.fitBounds() method):

const map = useMap();
useEffect(() => {
  if (!map || markerPositions.length === 0) return;

  // assuming markerPositions is just a `google.maps.LatLngLiteral[]`
  const bounds = new google.maps.LatLngBounds();
  for (let p of markerPositions) {
    bounds.extend(p);
  }
  map.fitBounds(bounds);
}, [map, markerPositions]);

[shirleyodeng]

@usefulthink thank you for your suggestions!

I tried using the full camera state but I came across the same non-draggable issue on the map:

Screen.Recording.2024-07-04.at.22.34.28.mov

So I've gone with your latter suggestion and that's worked - thank you again 🙌

[JarmoKamux]

I had this same issue and struggled with it for a couple of days. Using the cameraEventHandler-method did nothing for me and ultimately for me it was solved by changing

<Map
            className="relative top-0 w-full lg:max-h-full lg:flex-1"
            center={{ lat: 62.898, lng: 27.6782 }}
            zoom={6}
          >

to using

<Map
            className="relative top-0 w-full lg:max-h-full lg:flex-1"
            gestureHandling={'greedy'}
            defaultCenter={{ lat: 62.898, lng: 27.6782 }}
            defaultZoom={6}
          >

So to me it seems that the non-prefixed values are interfering with some of the eventHandler in the library itself.