0

Estoy intentando mostrar un mapa usando las apis de google maps, lo estoy haciendo con react js, el resultado una pagina en blanco, no tengo error alguno en la consola al intentar hacer un rastro, Soy nuevo en el tema, si me pueden dar una luz, he revisado la documentacion y varios ejemplos y ninguno me ha funcionado. De antemanomuchas gracias. Si requieren de algun dato mas que pueda ayudar. gracias.

Adjunto el codigo:

App.js

import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '../node_modules/font-awesome/css/font-awesome.css';
import './estilo.css'; 


class App extends Component {
  constructor(props){
    super(props);
    this.state={photo:''};
  }

  map='';

  componentDidMount(){
    const googlePlaceAPILoad = setInterval(() => {
      if (window.google){
        this.google = window.google;
        clearInterval(googlePlaceAPILoad);
        //let mapCenter: winodw.google.maps.Map;
        const mapCenter = new this.google.maps.LatLng(-0.001779, -78.455839);

        const map = new window.google.maps.Map(
          document.getElementById('gmapContainer'), {zoom: 17, center: mapCenter});
        const marker = new window.google.maps.Marker({
              position: mapCenter,
              draggable: true, 
              map: map,
            });
           
        marker.setMap(this.map);
      
      };
    },100);
  }

  render() {
    return (
      <div className="App" >
          <hr></hr>
          <div className='btn bton-lg btn-primary ml-5' id='cerca'>Sitios Cercanos</div>
          <hr></hr>
          <div id='gmapContainer' className='mt-2'></div>
          <hr></hr>
      </div>
    );
  }
}

export default App;```


1 respuesta 1

0

La solución fue hacer un ajuste en la hoja de estilos, adjunto el codigo.

#gmapContainer {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

Tu Respuesta

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

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