Se crea el componente para el mapa

import { GoogleMap, Marker, useLoadScript } from "@react-google-maps/api";

import { useState, useMemo } from "react";

import { REACT_APP_GOOGLE_API_KEY } from "../../constants/api_keys";

import { LoadingScreen } from "../loading_screen/loading_screen";

export const MapComponent = () => {

  const {isLoaded} = useLoadScript({

    googleMapsApiKey: REACT_APP_GOOGLE_API_KEY

  });

  const [marker, setMarker] = useState(false);

  const [latitude, setLatitude] = useState(0.0);

  const [longitude, setLongitude] = useState(0.0);

  const updateMarker = (event: google.maps.MapMouseEvent) => {

    if (event.latLng) {

      setMarker(true);

      setLatitude(event.latLng.lat());

      setLongitude(event.latLng.lng());

    }

  }

  const center  = useMemo(() => (

    {lat: 23.687, lng: -102.74}

  ),[])

  return (

    <div style={{width: '100%', height: '100%'}}>

      {!isLoaded

      ?

        <LoadingScreen/>

      :

        <GoogleMap

          center={center}

          zoom={8}

          mapContainerStyle={{height: '100%'}}

          onClick={updateMarker}

        >

          {marker && <Marker position={{lat: latitude, lng: longitude}}/>}

        </GoogleMap>

      }

    </div>

  );

}

 No newline at end of file