Skip to main content
1 de 3

API Google Maps en ReactJS

tengo que insertar un mapa que realicé con JS vanilla en ReactJS... Es para unas prácticas de la FP de DAW. Tengo esto, creo que debo importar alguna librería de google, pero la intención es hacerlo con las minímas 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;