Remove all interactions

[sebalaini]

I'm migrating the old component to use this new package, but I can't completely remove all map interactions.

This is my new code:

export const GoogleMaps = ({
  color,
  center,
  zoom,
  showMarker = false,
  markerContent,
}: {
  color: string
  center: google.maps.LatLngLiteral
  zoom: number
  showMarker?: boolean
  markerContent?: ReactNode
}) => {
  const [markerRef, marker] = useAdvancedMarkerRef()
  const [infoWindowShown, setInfoWindowShown] = useState(false)

  const handleMarkerClick = useCallback(
    () => setInfoWindowShown((isShown) => !isShown),
    []
  )
  const handleClose = useCallback(() => setInfoWindowShown(false), [])

  let mapColor
  let key = ''

  if (color === 'Blue') {
    mapColor = 'ce6'
    key = ''
  }
  if (color === 'DarkGold') {
    mapColor = '6f'
    key = ''
  }
  if (color === 'Yellow') {
    mapColor = 'f16'
    key = ''
  }

  return (
    <APIProvider apiKey={key}>
      <Map
        className='h-full'
        defaultCenter={center}
        defaultZoom={zoom}
        disableDefaultUI={true}
        rotateControl={false}
        scaleControl={false}
        streetViewControl={false}
        mapId={mapColor}
        onDrag={(evt) => evt.stop()}
        onDragstart={(evt) => evt.stop()}
        onClick={(evt) => evt.stop()}
        onZoomChanged={(evt) => evt.stop()}
      >
        {showMarker ? (
          <>
            <AdvancedMarker
              position={center}
              ref={markerRef}
              onClick={handleMarkerClick}
            >
              <Pin />
              {infoWindowShown && (
                <InfoWindow
                  anchor={marker}
                  onClose={handleClose}
                >
                  {markerContent}
                </InfoWindow>
              )}
            </AdvancedMarker>
          </>
        ) : null}
      </Map>
    </APIProvider>
  )
}

and this is what I was using previously to remove all interactions:

        disableDefaultUI: true,
        draggable: false,
        rotateControl: false,
        scaleControl: false,
        streetViewControl: false,
        panControl: false,

Is there a way to completely remove all map interactions minus the AdvancedMarker click?

[usefulthink]

I think using center and zoom instead of defaultCenter and defaultZoom should do the trick, if what you're after is to make sure the map doesn't move or zoom.

<Map center={center}
        zoom={zoom}
        disableDefaultUI={true} />

[sebalaini]

that seems to work as expected :) TY