Нужно подключить Google Maps в проект, написанный на React (с возможностью автозаполнения, построения маршрута, выбора способа передвижения). Подключила API в index.html в head через тег script в формате:
https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places
В компоненте создаю экземпляр карты и подключаю autocomplete и directions в useEffect:
let map, marker, directionsRenderer, directionsService, autocomplete, place;
const classes = useStyles()
const ref = useRef(null)
const inputRef = useRef(null)
const controlRef = useRef(null)
const [routeType, setRouteType] = useState(routeTypes.driving);
const [address, setAddress] = useState(null)
const position = {
lat: Number(apartment.geolocation.split(',')[0]),
lng: Number(apartment.geolocation.split(',')[1])
};
useEffect(() => {
map = new google.maps.Map(ref.current, {
center: position,
zoom: 13,
disableDefaultUI: true,
clickableIcons: false,
});
marker = new google.maps.Marker({
position: position,
map: map,
icon: '/images/map/marker.svg'
});
autocomplete = new google.maps.places.Autocomplete(inputRef.current, {
componentRestrictions: { country: "ru" },
});
directionsService = new google.maps.DirectionsService()
directionsRenderer = new google.maps.DirectionsRenderer()
directionsRenderer.setMap(map)
autocomplete.addListener("place_changed", () => {
place = autocomplete.getPlace();
marker.setVisible(false);
setAddress(place);
calculateAndDisplayRoute(place)
});
}, [])
Мне нужно вызывать функцию calculateAndDisplayRoute каждый раз при изменении routeType.
const calculateAndDisplayRoute = (addressTo) => {
directionsService.route(
{
origin: new google.maps.LatLng(position),
destination: addressTo.geometry.location,
travelMode: routeType,
},
(response, status) => {
if (status === "OK") {
directionsRenderer.setDirections(response);
}
}
);
}
Поэтому я вызываю ее в useEffect:
useEffect(() => {
if (address) {
calculateAndDisplayRoute(address)
}
}, [routeType])
Но переменная directionsService имеет значение undefined, хотя я перезаписываю ее в useEffect. Мне нужно изменять маршрут на карте при выборе другого способа передвижения, но я не могу достучаться до нужной переменной.