0

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;
}
9
  • 1
    Tal cual la usas en vanilla solo que para llamar a las funciones de la api debes poner window.funcionallamar(). De todos modos lo correcto seria que uses la libreria para react si es que existe. Por ejemplo leaflet es una muy buena para todo el asunto de mapas, marcadores y demas Commented el 4 abr. 2022 a las 15:16
  • en Vanilla tengo esta etiqueta <script> que no se como se traduciria en ReactJS, porque esta es la que lleva la API... U.u <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDaeWicvigtP9xPv919E-RNoxfvC-Hqik&callback=iniciarMapa"></script> Commented el 4 abr. 2022 a las 20:53
  • Esa etiqueta agregala en el index.html que esta en la carpeta public si usaste create-react-app. En el head Commented el 4 abr. 2022 a las 21:15
  • Eso me parece una bestialidad, no se como acceder a la función que le paso de callback en la url si ese método es de otro componente... Commented el 4 abr. 2022 a las 21:19
  • La misma funcion que usas en vanilla para inicializarla se usa en react solo que para llamar a los metodos de la api debes anteponer window..... Commented el 4 abr. 2022 a las 21:32

1 respuesta 1

0

El ejemplo que te dan en NPM debes usar. El cual seria este: Crea un componente con el nombre que desees y coloca este codigo en el (previo haber instalado la api de google por consola):

import React from 'react'
import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';

const containerStyle = {
 width: '400px',
 height: '400px'
};

const center = {
 lat: -3.745,
 lng: -38.523
};

function MyComponent() {
 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 isLoaded ? (
  <GoogleMap
   mapContainerStyle={containerStyle}
   center={center}
   zoom={10}
   onLoad={onLoad}
   onUnmount={onUnmount}
  >
   { /* Child components, such as markers, info windows, etc. */}
   <></>
  </GoogleMap>
 ) : <></>
}

export default React.memo(MyComponent)

Llamalo desde donde quiera que necesites que aparezca el mapa y vas a obtener un recuadro vacio, sin mapa, ya que la api requiere que habilites el BILLING con una tarjeta de credito, aunque es gratuito debes proporcionar la tarjeta igual. Una vez que habilites veras aparecer el mapa.

Por eso te recomende LEAFLET https://react-leaflet.js.org/ en vez de google maps, es tambien gratuita pero no tienes que habilitar nada.

Por otro lado los componentes funcionales y los hooks son lo que se usa hoy dia en REACT, por supuesto no voy a explicartelo porque es un tema extenso pero te dejo la pagina en castellano de React:

https://es.reactjs.org/

y un muy completo tutorial en youtube donde te explican todo de React a fondo, muy recomendable:

https://youtube.com/playlist?list=PLvq-jIkSeTUZ5XcUw8fJPTBKEHEKPMTKk

espero te sirva!!

3
  • BLESS!!! 💚 Muchas Gracias por el pedazo de curso, me parece una gran inversion de tiempo pero de una manera muy productiva, voy a esforzarme por verlo... Mi pregunta sobre el componente de google es que a mi me han enseñado a programarlo todo orientado a objetos y mucho mas si hablamos de un componente de un framewwork y hacer eso que dices me chirria bastante... de todos modos si es la unica opción me tendre que limitar a eso Commented el 6 abr. 2022 a las 10:25
  • REACT en sus comienzos fue con clases (que no te engañe el termino clases, es azucar sintactica para las funciones prototipicas de js) pero luego con la llegada de los Hooks pudo dotarse a los componentes funcionales de entre muchas otras cosas un Estado como lo tenian las clases. Hoy dia todo lo que va saliendo para React se basa en funciones, es mucho mas simple y menos verboso que las clases, bien vale la pena si lo estudias. En ese curso puedes arrancar desde los videos de Hooks si es que ya dominas las clases. Commented el 6 abr. 2022 a las 11:27
  • Por otro lado si te gusta la POO deberias interiorizarte en Typescript, las clases son mucho mejores que las nativas de JS (siempre azucar sintactica) y tiene muchas mas caracteristicas como encapsulado, herencia, enums, interfases, tipado estatico. Es como tener c# en JS Commented el 6 abr. 2022 a las 11:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.