import './App.css';
import Mapa from './components/mapa.js';
function App() {
return (
<Mapa />
);
}
export default App;App;`
también he probado con el wrapper, pero me da este fallo: React Hook "useJsApiLoader" is called in function "crearMapa" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use", adjunto por aquí el código
import React, { Component } from 'react';
import './css/mapa.css';
import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
export default class Mapa extends Component {
constructor(){
var mapa = this.crearMapa();
}
render(){
return this.mapa.isLoaded ? (
<GoogleMap
mapContainerStyle={this.mapa.containerStyle}
center={this.mapa.center}
zoom={10}
onLoad={this.mapa.onLoad}
onUnmount={this.mapa.onUnmount}
></GoogleMap>
) : <></>
}
}
function crearMapa(){
let geo = navigator.geolocation.getCurrentPosition(this.coordenadasActuales);
const containerStyle = {
width: '100%',
height: '100vh'
};
const center = {
lat: this.coordenadasActuales().latitude,
lng: this.coordenadasActuales().longitude
};
const { isLoaded } = useJsApiLoader({
id: 'google-map-script',
googleMapsApiKey: "AIzaSyBDaeWicvigtP9xPv919E-RNoxfvC-Hqik"
});
const [map, setMap] = React.useState(null);
const onLoad = React.useCallback(function callback(map) {
const bounds = new window.google.maps.LatLngBounds();
map.fitBounds(bounds);
setMap(map);
}, [])
const onUnmount = React.useCallback(function callback(map) {
setMap(null);
}, [])
return {containerStyle, center, isLoaded, onLoad, onUnmount};
}
function coordenadasActuales(geoCoord){
return geoCoord.coords;
}