Soy nuevo en React Google Maps. Estoy usando esta biblioteca para crear un mapa con varias ubicaciones e intento ajustar los límites y centrarlo. Lo estoy usando para ubicar restaurantes, hoteles y todo en esa ubicación en particular.

Este es mi código en el que recibo un error y también obtengo TypeError: no se pueden leer las propiedades de undefined (leyendo 'lat') console.log (bounds.sw,bounds.ne) == undefined console.log (datos) == indefinido

Aplicación.js

 function App(){ const [places, setPlaces] = useState([]); const [coordinates, setCoordinates] = useState({}); const [bounds, setBounds] = useState({}); useEffect(() => { // this use effect for detecting current location navigator.geolocation.getCurrentPosition(({ coords:{latitude, longitude} }) => { setCoordinates({ lat: latitude, lng: longitude }); // console.log(latitude,longitude) }) },[]); useEffect(() => { getPlacesData(bounds.sw, bounds.ne) // console.log(bounds.sw, bounds.ne) .then((data)=>{ // console.log(data); setPlaces(data) }) },[coordinates, bounds]); return(<> <Map setCoordinates={setCoordinates} setBounds = {setBounds} coordinates = {coordinates} /> <> )}

Api.js

 import axios from 'axios'; const URL = 'https://travel-advisor.p.rapidapi.com/restaurants/list-in-boundary' export const getPlacesData = async(sw, ne) =>{ try { const {data:{data}} = await axios.get(URL, { params: { bl_latitude: sw.lat, tr_latitude: ne.lat, bl_longitude: sw.lng, tr_longitude: ne.lng, }, headers: { 'X-RapidAPI-Host': 'travel-advisor.p.rapidapi.com', 'X-RapidAPI-Key': 'Key' } }); return data;