Tracking Changes

Track changes in the map, like center, zoom, bounds, etc.

Note the initial values
Zoom: null
Center: null
Bounds: null

import type { MapCameraChangedEvent } from "@vis.gl/react-google-maps";

// ...

function onCenterChanged(ev: MapCameraChangedEvent) {
  setCenter(ev.detail.center);
}
    
function onZoomChanged(ev: MapCameraChangedEvent) {
  setZoom(ev.detail.zoom);
}
    
function onBoundsChanged(ev: MapCameraChangedEvent) {
  setBounds(ev.detail.bounds);
}

// ...

<SimpleMap
  onCenterChanged={onCenterChanged}
  onZoomChanged={onZoomChanged}
  onBoundsChanged={onBoundsChanged}
  height="500px"
/>