Я работал над проектом, в котором мне нужно реализовать карту Google с помощью ReactJS.

Во-первых, нам нужно установить библиотеку react-google-maps. С помощью приведенной ниже команды.
«npm install — save react-google-maps».

Мы также будем использовать recompose здесь:
npm install — сохранить recompose

Затем создайте компонент высокого порядка, который будет повторно использоваться в другом компоненте. Код для него, как показано ниже:

/*глобальный гугл*/

импортировать React из «реагировать»;

import {compose, withProps, lifecycle} из «recompose»;

Импортировать {

со скриптами,

с GoogleMap,

Google Map,

НаправленияRenderer

} из «реагировать-гугл-карты»;

класс googleMapComponent расширяет React.Component {

конструктор (реквизит) {

супер (реквизит);

}

оказывать() {

const DirectionsComponent = compose(

с реквизитом ({

googleMapURL:

«https://maps.googleapis.com/maps/api/js?key={YOUR_API_Key}&callback=initMap'»,

loadingElement: ‹div style={{ height: `400px` }} /›,

containerElement: ‹div style={{ width: `100%` }} /›,

mapElement: ‹div style={{ высота: `600px`, ширина: `600px` }} /›

}),

со скриптами,

с GoogleMap,

жизненный цикл({

компонентDidMount () {

const DirectionsService = new google.maps.DirectionsService();

DirectionsService.route(

{

происхождение: новый google.maps.LatLng(37.762391, -122.439192),

пункт назначения: новый google.maps.LatLng(37.338207, -121.88633),

режим путешествия: google.maps.TravelMode.TRANSIT

},

(результат, статус) =› {

если (статус === google.maps.DirectionsStatus.OK) {

это.setState({

направления: {…результат},

маркеры: правда

});

} еще {

console.error(`ошибка получения направления ${result}`);

}

}

);

}

})

)(реквизит =› (

‹GoogleMap по умолчаниюZoom={10}›

{реквизиты.направления && (

‹DirectionsRenderer

направления={реквизиты.направления}

подавляющие маркеры = {реквизиты.маркеры}

/>

)}

));

return ‹DirectionsComponent /›;

}

}

экспортировать компонент googleMapComponent по умолчанию;

Основное отличие состоит в том, что теперь у нас есть новый HOC, называемый жизненным циклом, из библиотеки recompose, который получает указания после монтирования компонента. Кроме того, причина, по которой я добавил /*global google*/, заключалась в том, что я мог определить объект google в глобальном состоянии. Мои объекты Google не могли работать, если я не сделал этого.

Я надеюсь, что это поможет вам.