Se crea un componente para determinar la ubicacion del lugar por medio de su...

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

import { useState, useEffect, Dispatch, SetStateAction } from "react";

import {

  UseFormGetValues,

  UseFormRegister,

  FieldErrors,

} from "react-hook-form";

import { Place } from "../../infraestructure/entities/place";

import { Position } from "../map/map_google";

import "./assets/css/styles.css";

interface props {

  getValues: UseFormGetValues<Place>;

  register: UseFormRegister<Place>;

  errors: FieldErrors<Place>;

  setPosition: Dispatch<SetStateAction<Position | null>>;

  setLoading: Dispatch<SetStateAction<boolean>>;

}

export const GeocodingGoogle = ({

  getValues,

  register,

  errors,

  setPosition,

  setLoading,

}: props) => {

  const geocodingApiLoaded = useMapsLibrary("geocoding");

  const [geocodingService, setGeocodingService] =

    useState<google.maps.Geocoder>();

  const [geocodingResult, setGeocodingResult] =

    useState<google.maps.GeocoderResult>();

  const getPositionByAddress = () => {

    const address = getValues("address");

    if (!geocodingService || !address) return;

    setLoading(true);

    geocodingService?.geocode({ address }, (results, status) => {

      if (results && status === "OK") {

        setGeocodingResult(results[0]);

      }

    });

    setLoading(false);

  };

  useEffect(() => {

    if (!geocodingApiLoaded) return;

    setGeocodingService(new window.google.maps.Geocoder());

  }, [geocodingApiLoaded]);

  useEffect(() => {

    if (!geocodingResult) return;

    setPosition({

      latitude: geocodingResult.geometry.location.lat(),

      longitude: geocodingResult.geometry.location.lng(),

    });

  }, [geocodingResult]);

  return (

    <div className="address_input_cnt">

      <label>Dirección</label>

      <div className="address_locate_cnt">

        <button type="button" onClick={getPositionByAddress}>

          {" "}

          Ubicar

        </button>

        <input

          type="text"

          {...register("address")}

          onKeyDown={(event) => {

            if (event.key === "Enter") {

              getPositionByAddress();

            }

          }}

        />

      </div>

      <p className="error">{errors.address?.message}</p>

    </div>

  );

};