[Bug] unable to zoom in, zoom out, or drag the map

[abhishekmardiya]

Description

unable to zoom in, zoom out, or drag the map.

Steps to Reproduce

Whole Code

import {
  APIProvider,
  InfoWindow,
  Map,
  Marker,
  useMarkerRef,
} from "@vis.gl/react-google-maps";
import { useState } from "react";

interface Props {
  lat: number;
  lng: number;
  fullAddress: string;
}

export const GoogleMap = ({ lat, lng, fullAddress }: Props) => {
  const position = { lat, lng };

  const [markerRef, marker] = useMarkerRef();
  const [isInfoWindowOpen, setIsInfoWindowOpen] = useState(true);

  const toggleInfoWindowStatus = (state?: boolean) =>
    setIsInfoWindowOpen((previousState) => !previousState);

  return (
    <APIProvider
      apiKey={process?.env?.NEXT_PUBLIC_GOOGLE_MAP_API_KEY as string}
    >
      <Map
        center={position}
        zoom={14}
        className="h-60 w-full rounded-md border border-C_E1E1E1"
      >
        <Marker
          position={position}
          ref={markerRef}
          onClick={() => toggleInfoWindowStatus(true)}
        />
        {isInfoWindowOpen && (
          <InfoWindow
            anchor={marker}
            onCloseClick={() => toggleInfoWindowStatus(false)}
          >
            <span className="line-clamp-2 break-words">{fullAddress}</span>
          </InfoWindow>
        )}
      </Map>
    </APIProvider>
  );
};

Environment

• Library version: @vis.gl/react-google-maps: 0.6.1
• Browser and Version: Chrome
• OS: Windows

Logs

NA

[usefulthink]

That was a recent change we did to the API, we are now using center/defaultCenter props like React-form elements. If you don't want to deal with the state, you can use defaultCenter/defaultZoom. See here: https://visgl.github.io/react-google-maps/docs/api-reference/components/map#controlled-and-uncontrolled-props

[usefulthink]

(feel free to reopen if that doesn't solve your issue)

[abhishekmardiya]

Thanks a lot. It worked.