Загрузите асинхронный API Google Maps JavaScript с помощью React

Question

Я пытаюсь использовать реагировать и API Карт Google.

TL: TR => как использовать google.maps с React

Функциональность Desire: необходимо загрузить положение карты на лету, выделив агента в теге <select>, выбрать путевые точки, и они отобразят карты с путевыми точками. Все что мне нужно для оптимизации путевых точек.

Без реакции довольно легко.

Прямо сейчас просто используйте данные в жестком коде (железный человек, тор ...) и укажите широту, длину, которая будет origin и destination для Карт Google, но позже я возьму эту информацию из Azure с помощью Express. Путевые точки также будут из базы данных.

Проблема в том, что я не могу использовать объект Google, потому что он не существует, поскольку он загружен в асинхронную глобальную область. Так что new google.maps.Map не работает.

Попробуйте с этим пакетом npm load-google-maps-api но все равно не повезло.

Подробное объяснение, а затем, как использовать API JavaScript Карт со всеми его возможностями в приложении реагирования, когда необходимая информация может измениться.

Например, я не мог этого сделать, потому что я не знаю центра до выбора агента. С <script> он выполняется как обратный вызов

map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });

Мой код здесь https://github.com/adrianwix/GoogleMapApi Вы хотите посмотреть.

Answer 1

Вы можете это.

componentDidUpdate() {
    if(!this.state.loadGoogleMap) {
        loadGoogleMap();
    }
}
async loadGoogleMap() {
    await _loadGoogleMap();

    this.setState({ loadGoogleMap: true });
}