Estoy tratando de usar un botón para desplazar el mapa de Google a la ubicación actual de los usuarios. El panTo es efectivo pero solo en valores numéricos. Intento usar el método parseFloat en los valores devueltos por la geolocalización, pero no funciona.
El error que recibo es 'no es LatLng o LatLngLiteral con coordenadas finitas: en la propiedad lat: NaN no es un valor aceptado', nombre: 'InvalidValueError', stack: 'Error\n'
const AddSpotPage = (props) => { const {isLoaded}= useJsApiLoader({ googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY, }) const [map, setMap]= useState( /** @type google.maps.GoogleMap */ (null)) **let userLat; let userLong; let test = {lat: parseFloat(userLat), lng: parseFloat(userLong)}** let center = {lat: 50.8584, lng: 12.2945} useEffect(()=> { navigator.geolocation.getCurrentPosition(position =>{ userLat = position.coords.latitude ; userLong = position.coords.longitude ; console.log(userLat, userLong); }) },[]); return ( <div className="pt-5 justify-content-center align-items-center d-flex w-100" style={{ backgroundSize: "cover", height: "100vh", }} > <GoogleMap center={center} zoom={15} mapContainerStyle={{width: "80%", height:"80%"}} onLoad={map=>setMap(map)} </GoogleMap> **<button onClick={()=> map.panTo(test)}>Pan Location</button>** </div> ); }; export default AddSpotPage;Aquí está el código que funcionó para mí:
const[userLat, setUserLat]= useState(); const[userLong, setUserLong]= useState(); useEffect(()=> { navigator.geolocation.getCurrentPosition(position =>{ setUserLat(position.coords.latitude); setUserLong(position.coords.longitude); console.log(userLat, userLong); }) },[]); return( <> <GoogleMap center={center} zoom={15} mapContainerStyle={{width: "80%", height:"80%"}} onLoad={map=>setMap(map)} > </GoogleMap> <button onClick={()=> map.panTo({lat:userLat,lng:userLong})}>Pan Location</button> </>