search

visgl / react-google-maps

React components and hooks for the Google Maps JavaScript API
https://visgl.github.io/react-google-maps/
MIT License
1.2k stars 96 forks source link

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

Open usefulthink opened 3 months ago

usefulthink commented 3 months ago

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

Logs

No response

shirleyodeng commented 2 months ago

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 https://github.com/visgl/react-google-maps/issues/436 that was created after this issue was opened so is this fixed? 🤔

usefulthink commented 2 months ago

@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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

@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:

https://github.com/visgl/react-google-maps/assets/33064059/ca356144-d767-48e2-88e9-7e527f3bff7a

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

JarmoKamux commented 1 month ago

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.

bdubetink commented 1 month ago

I know this bug has been describe as "is going to be very hard to fix", but is there an update upon a possible fix ? or a workaround?

I had a workaround in place where ondrag event and onZoomChanged event I resseted the custom zoom and center position that I had previously set, but using center and zoom props, prevent the infowindows autopan functionnality.

So I'm in a situation where I can have the autopan on infowindow opening or the ability to zoom and center the map on a location and be able to drag and zoom the map manually after, but not both features.

That is a dealbreaker for the app we develop and if there is no solution, it would force us to compeltely redo the work.

Thanks

niranjan404 commented 1 month ago

I know this bug has been describe as "is going to be very hard to fix", but is there an update upon a possible fix ? or a workaround?

I had a workaround in place where ondrag event and onZoomChanged event I resseted the custom zoom and center position that I had previously set, but using center and zoom props, prevent the infowindows autopan functionnality.

So I'm in a situation where I can have the autopan on infowindow opening or the ability to zoom and center the map on a location and be able to drag and zoom the map manually after, but not both features.

That is a dealbreaker for the app we develop and if there is no solution, it would force us to compeltely redo the work.

Thanks

Can you share the fix you made for this one? stuck in this for almost one week.

niranjan404 commented 1 month ago

All possible solutions mentioned not working for me: @usefulthink Please help fix this, I am using "@vis.gl/react-google-maps": "1.1.0", 😭

I want the users to be able to see the map by moving inside it using their cursor but not works

        const onZoomChanged = (event: MapCameraChangedEvent) => {
          const { detail: { zoom } } = event || {};
          setState({
            zoom,
          });
        };

        const handleCameraChange = (event: MapCameraChangedEvent) => {
          const { detail: { center: { lat, lng } } } = event || {};
          setState({
            defaultBounds: {
              lat: lat,
              lng: lng,
            },
            zoom,
          });
        };
       <Map
        mapId='shared-widgets'
        zoom={zoom}
        onZoomChanged={onZoomChanged}
        onCameraChanged={handleCameraChange}
        controlSize={20}
        mapTypeId='hybrid'
        zoomControl={true}
        clickableIcons={false}
        disableDefaultUI={true}
        reuseMaps={true}
        defaultCenter={defaultBounds}
        center={defaultBounds}
        gestureHandling='greedy'
        streetViewControl={false}
        keyboardShortcuts={true}
        className={classes.swMapStyle}
      />
bdubetink commented 1 month ago

I know this bug has been describe as "is going to be very hard to fix", but is there an update upon a possible fix ? or a workaround? I had a workaround in place where ondrag event and onZoomChanged event I resseted the custom zoom and center position that I had previously set, but using center and zoom props, prevent the infowindows autopan functionnality. So I'm in a situation where I can have the autopan on infowindow opening or the ability to zoom and center the map on a location and be able to drag and zoom the map manually after, but not both features. That is a dealbreaker for the app we develop and if there is no solution, it would force us to compeltely redo the work. Thanks

Can you share the fix you made for this one? stuck in this for almost one week.

What I have done to be able to, is to add those to event to the Map component :

I set sone states bfore

/* mapPos is a props of my component */
const [mapCenterPos, setMapCenterPos] = useState({ lat: mapPos.lat, lng: mapPos.lng });
const [mapZooming, setMapZooming] = useState(10);

useEffect(() => {
    setMapCenterPos(center);
  }, [center]);

  useEffect(() => {
    setMapZooming(mapZoom);
  }, [mapZoom]);
<Map
    ...
    defaultZoom={mapZoom}
    center={mapCenterPos}
    zoom={mapZooming}
    onDrag={() => { resetCenter() }}
    onZoomChanged={() => { resetZoom() }}
>...</Map>

and in those event, I reset the state I used to set the maps props : 

const resetCenter = () => {
    setMapCenterPos(false);
  }

  const resetZoom = () => {
    setMapZooming(false);
  }

Sorry if I can't sahre all my code, it is compose of multiple components in a big project.

But the fix with the event that I have done, prevent the autopan feature to work as describe here : https://visgl.github.io/react-google-maps/docs/api-reference/components/info-window#infowindow-attached-to-marker

That the issue I still have and still need to fix ASAP

niranjan404 commented 1 month ago

I know this bug has been describe as "is going to be very hard to fix", but is there an update upon a possible fix ? or a workaround? I had a workaround in place where ondrag event and onZoomChanged event I resseted the custom zoom and center position that I had previously set, but using center and zoom props, prevent the infowindows autopan functionnality. So I'm in a situation where I can have the autopan on infowindow opening or the ability to zoom and center the map on a location and be able to drag and zoom the map manually after, but not both features. That is a dealbreaker for the app we develop and if there is no solution, it would force us to compeltely redo the work. Thanks

Can you share the fix you made for this one? stuck in this for almost one week.

  • I define the defaultZoom and center props at load with the default position of my map.
  • Then, when a user click on a card linked to a marker, I set the zoom props to the new zoom I want, and I change the state I use for the center props value, to use the new position. After those change, if nothing done, I can't move or scroll the map with the mouse anymore.

What I have done to be able to, is to add those to event to the Map component :

I set sone states bfore

/* mapPos is a props of my component */
const [mapCenterPos, setMapCenterPos] = useState({ lat: mapPos.lat, lng: mapPos.lng });
const [mapZooming, setMapZooming] = useState(10);

useEffect(() => {
    setMapCenterPos(center);
  }, [center]);

  useEffect(() => {
    setMapZooming(mapZoom);
  }, [mapZoom]);
<Map
    ...
    defaultZoom={mapZoom}
    center={mapCenterPos}
    zoom={mapZooming}
    onDrag={() => { resetCenter() }}
    onZoomChanged={() => { resetZoom() }}
>...</Map>

and in those event, I reset the state I used to set the maps props :

const resetCenter = () => {
    setMapCenterPos(false);
  }

  const resetZoom = () => {
    setMapZooming(false);
  }

Sorry if I can't sahre all my code, it is compose of multiple components in a big project.

But the fix with the event that I have done, prevent the autopan feature to work as describe here : https://visgl.github.io/react-google-maps/docs/api-reference/components/info-window#infowindow-attached-to-marker

That the issue I still have and still need to fix ASAP

Oh man you are a saviour 🫰