He estado trabajando con un curso en línea usando Webpack y Googlemaps, y necesito llevarlo a mi aplicación Create-React-App, pero sé que create-react-app no lee etiquetas de script con claves api en el público / índice Archivo .html. ¿Existe una solución alternativa en lugar de usar los paquetes npm de google maps? Realmente agradecería cualquier consejo en la dirección correcta.

Aquí está mi etiqueta de script con API_KEY:

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key='API_KEY'">
</script>

Aquí está mi objeto de mapas de Google dentro de mi componentDidMount ():

componentDidMount(){

  const {properties, activeProperty} = this.props;

  const {latitude, longitude} = activeProperty;

  this.map = new google.maps.Map(this.refs.map, {
      center: {lat: latitude, lng: longitude},
      mapTypeControl: false,
      zoom: 14
  });

  this.createMarkers(properties);

}
0
justkeithcarr 16 oct. 2018 a las 23:47

2 respuestas

La mejor respuesta

Para administrar los parámetros de la biblioteca de Google Maps, en lugar de hacer referencia a la biblioteca de Google Maps a través de index.html, podría considerar cargar recursos de secuencias de comandos a pedido, como algunas bibliotecas populares lo hacen.

Por ejemplo, con el ReactDependentScript componente, la API de Google Maps podría cargarse así:

class App extends Component {
  render() {

    const MAP_KEY = "--YOUR-KEY-GOES-HERE--";

    return (
      <div>
        <ReactDependentScript scripts={[`https://maps.googleapis.com/maps/api/js?key=${MAP_KEY}`]}>
          <Map center={{ lat: -34.397, lng: 150.644 }} zoom={3} />
        </ReactDependentScript>
      </div>
    );
  }
}

Aquí hay una demostración para su referencia.

1
Vadim Gremyachev 17 oct. 2018 a las 09:33

¿Podría escribir todo su componente / clase? ¿Dónde inyectaste tu guión? si lo hizo en el html estático, necesitará window.google.

Escribí un ejemplo para ti, recuerda inyectar tu script con la clave API en public / index.html

class App extends React.Component {
  componentDidMount() {
    this.map = new window.google.maps.Map(this.map, {
      center: { lat: 41.3851, lng: 2.1734 },
      mapTypeControl: false,
      zoom: 14
    });
  }

  render() {
    return (
      <div>
        <div
          style={{ width: "600px", height: "600px" }}
          ref={e => (this.map = e)}
        />
      </div>
    );
  }
}
-1
markymark 17 oct. 2018 a las 09:13