Skip to main content
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
se añadieron 2038 caracteres en el cuerpo
Origen Enlace
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;
}
import './App.css';
import Mapa from './components/mapa.js';

function App() {
  return (
    <Mapa />
  );
}

export default App;
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;
}

tengoTengo que insertar un mapa que realicé con JS vanillaJS vanilla en ReactJS... Es para unas prácticas de la FP de DAW. Tengo

Realicé esto y, creoconsidero que debo importar alguna librería de googleGoogle, pero la intención es hacerlo con las minímasmí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;

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;

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;
Origen Enlace

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;