Тег сценария карты Google не работает для файла index.html, созданного приложением-реакция-приложением, какой обходной путь?

Question

Я работал с онлайн-курсом, используя Webpack & Googlemaps, и мне нужно перенести его в мое приложение Create-React-App, но я знаю, что create-response-app не читает теги сценария с ключами API вфайл public / index.html.Есть ли обходной путь вместо использования пакетов карт Google npm?Я действительно буду признателен за любые советы в правильном направлении.

Вот мой тег сценария с API_KEY:

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

Вот мой объект карт Google внутри моего 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);

}

Answer 1

Чтобы управлять параметрами библиотеки Google Maps, вместо ссылки на библиотеку Google Maps через index.html вы можете загрузить ресурсы сценариев по запросу, например некоторые популярные библиотеки do.

Например,, с ReactDependentScript компонентом API Карт Google может быть загружен так:

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>
    );
  }
}

Вот демоверсия для справки

Answer 2

Не могли бы вы написать весь ваш компонент / класс?Где вы вводили свой сценарий?если вы сделали это в статическом html, вам понадобится window.google.

Я написал для вас пример, не забудьте ввести ваш скрипт с ключом API в 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>
    );
  }
}