Unable to drag the Map

[nileshkant]

I want to achieve the Google Map where the marker remains centered, even when users drag or zoom in/out. However, currently, I'm unable to drag the map at all.

"use client";
import LoadingSpinner from "@/lib/custom-icons/loading-spinner";
import {
  AdvancedMarker,
  Map,
  MapCameraChangedEvent,
  MapCameraProps,
  useMapsLibrary,
} from "@vis.gl/react-google-maps";
import { LucideMapPin } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useToast } from "../ui/use-toast";

export type UserLocation = {
  lat?: number;
  lng?: number;
  fullAddress?: string;
};
type Props = {
  position?: {
    lat: number;
    lng: number;
  };
  isMapLoading: boolean;
  userMapAddress: ({ lat, lng, fullAddress }: UserLocation) => void;
};

const INITIAL_CAMERA = {
  center: { lat: 40.7, lng: -74 },
  zoom: 20,
};

const removefirstPart = (address: google.maps.GeocoderAddressComponent[]) => {
  address.shift();
  return address
    .map((item) => item.long_name)
    .filter((value, index, self) => self.indexOf(value) === index)
    .join(", ");
};

export const CurrentLocationMap = ({
  position,
  isMapLoading,
  userMapAddress,
}: Props) => {
  const geocodingLib = useMapsLibrary("geocoding");
  const [pinPosition, setPinPosition] = useState(position);
  const [location, setLocation] = useState<string>();
  const [cameraProps, setCameraProps] = useState<MapCameraProps>({
    center: INITIAL_CAMERA.center,
    zoom: INITIAL_CAMERA.zoom,
  });
  const { toast } = useToast();

  const geocoder = useMemo(
    () => geocodingLib && new geocodingLib.Geocoder(),
    [geocodingLib],
  );

  const getGeoCode = useCallback(
    async (latLng: google.maps.LatLngLiteral | google.maps.LatLng) => {
      return new Promise((resolve, reject) => {
        geocoder?.geocode({ location: latLng }, (results, status) => {
          if (status === "OK") {
            if (results && results[0]) {
              const location = removefirstPart(results[0].address_components);
              userMapAddress({ ...pinPosition, fullAddress: location });
              resolve(location);
            } else {
              toast({
                description: "No results found",
                variant: "destructive",
              });
            }
          } else {
            toast({
              description: "Geocoder failed due to: " + status,
              variant: "destructive",
            });
          }
        });
      });
    },
    [geocoder, pinPosition, toast, userMapAddress],
  );
  useEffect(() => {
    if (!position) return;
    setCameraProps({
      center: position,
      zoom: INITIAL_CAMERA.zoom,
    });
    getGeoCode(position)
      .then((location: unknown) => {
        setLocation(location as string);
      })
      .catch((error) => {
        toast({
          description: (error as Error).message,
          variant: "destructive",
        });
      });
  }, [position, getGeoCode, toast]);

  const handleCameraChange = useCallback((ev: MapCameraChangedEvent) => {
    setCameraProps(ev.detail);
  }, []);

  const handleBoundsChanged = async (e: MapCameraChangedEvent) => {
    const mapCenter = e.detail;
    setPinPosition(mapCenter.center);
    const location = await getGeoCode(mapCenter.center);
    setLocation(location as string);
  };

  return (
    <>
      {isMapLoading && !location && (
        <div className="flex justify-center">
          <LoadingSpinner options={{ height: 32 }} />
        </div>
      )}
      {location && (
        <>
          <h3 className="mb-1 inline-flex font-semibold">
            <LucideMapPin size={16} className="mr-2 self-center" />
            Store Location
          </h3>
          <p className="mb-4 font-medium text-gray-600">{location}</p>
          <Map
            style={{ width: "100%", height: "40vh" }}
            gestureHandling={"greedy"}
            mapId={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!}
            defaultCenter={pinPosition}
            defaultZoom={INITIAL_CAMERA.zoom}
            {...cameraProps}
            onCameraChanged={handleCameraChange}
            isFractionalZoomEnabled
            onBoundsChanged={handleBoundsChanged}
          >
            <AdvancedMarker position={pinPosition}></AdvancedMarker>
          </Map>
        </>
      )}
    </>
  );
};

[mrMetalWood]

The main problem seems to be await getGeoCode(mapCenter.center); in the onBoundsChanged handler which is preventing the position update flow to finish on time.

I would suggest a few changes:

• Since you have a "controlled" component with the cameraProps you can remove the defaultCenter and defaultZoom properties. They are ignored in this case.

• Remove the the onCameraChanged prop and remove the async/await call from the handleBoundsChanged

  const handleBoundsChanged = async (e: MapCameraChangedEvent) => {
    setPinPosition(e.detail.center);
    setCameraProps({center: e.detail.center, zoom: e.detail.zoom})
  };

• The "live" geocoding whenever the bounds change is not ideal. There are simply too many changes per second. Even if it would work it could become be very expensive very quickly. I would suggest to do the geocoding with the onIdle event/prop. This fires whenever the map "idles" (stops moving after a pan or a zoom)

Here is a basic example of the mechanism: https://codesandbox.io/p/devbox/centered-marker-wnzg98?file=%2Fsrc%2Fapp.tsx%3A27%2C32&workspaceId=308f8424-7fda-45b9-be07-d27ae10b961b

When keeping the pin centered this way you will however probably see a bit of jitter and/or tiny delay on the marker when moving the map. Another approach would be not to use a maps marker with lat/lng but to use just an image that is centered on top of the map/DOM container. This way it should be perfectly smooth and it will always be centered automatically when the map moves underneath.

So the main point is: Move the geocoding out of the lat/lng update path for the controlled map component.