Tengo que insertar un mapa que realicé con JS vanilla en ReactJS.
Realicé esto y, considero que debo importar alguna librería de Google, pero la intención es hacerlo con las mínimas posibles, por eso intento adaptar el código de JS vanilla
import React, { Component } from 'react';
import './css/mapa.css';
export default class Mapa extends Component {
render(){
return(
<React.Fragment>
var geo = navigator.geolocation.getCurrentPosition(this.respuestaMapaSatisfactoria);
</React.Fragment>
);
}
respuestaMapaSatisfactoria(geoCoord){
let coord = geoCoord.coords;
let mapCoord = {lat: coord.latitude, lng: coord.longitude};
let map = new google.maps.Map(document.getElementsByClassName('map')[0],{
zoom: 20,
center: mapCoord
});
let marker = new google.maps.Marker({
position: mapCoord,
map: map
});
}
}
Y este sería el componente principal:
import './App.css';
import Mapa from './components/mapa.js';
function App() {
return (
<Mapa />
);
}
export default 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;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDaeWicvigtP9xPv919E-RNoxfvC-Hqik&callback=iniciarMapa"></script>