Directions request failed due to REQUEST_DENIED. Google map API
Нужно составить маршрут между двумя маркерами. Писал по примеру из этого видео https://www.youtube.com/watch?v=xcGp3wrF07Y&ab_channel=CodeFlix
import React, { Component } from 'react';
const divStyle = {
marginTop:'20px',
width: '100%',
height:'400px'
};
let map,firstMarker,secondMarker;
class OrderMap extends Component {
componentDidMount(){
this.renderMap()
}
renderMap=()=>{
loadScript("https://maps.googleapis.com/maps/api/js?key=ключ&callback=initMap")
window.initMap=this.initMap
}
initMap=()=>{
var directionsService = new window.google.maps.DirectionsService;
var directionsDisplay = new window.google.maps.DirectionsRenderer;
map = new window.google.maps.Map(document.getElementById('map'),
{
center:{lat:54.51,lng:36.25},
zoom:13.4}
)
directionsDisplay.setMap(map);
firstMarker = new window.google.maps.Marker({
position: { lat: 54.513, lng: 36.269 },
map: map,
});
window.google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
calculateAndDisplayRoute(directionsService,directionsDisplay);
});
}
render() {
return (
<div>
<div style={divStyle} id="map"></div>
</div>
);
}
}
function loadScript(url){
var index =window.document.getElementsByTagName("script")[0]
var script = window.document.createElement("script")
script.src=url
script.async=true
script.defer=true
index.parentNode.insertBefore(script,index)
}
function calculateAndDisplayRoute(directionsService,directionsDisplay){
directionsService.route({
origin: firstMarker.position,
destination: secondMarker.position,
travelMode:'DRIVING'
}, function(response,status){
if(status==='OK'){
directionsDisplay.setDirection(response);
}else{
window.alert('Directions request failed due to '+ status);
}
});
}
function placeMarker(location) {
secondMarker = new window.google.maps.Marker({
position: location,
map: map
})
}
export default OrderMap;
Выдает такие ошибки, пишет что ключ не авторизован, хотя я его включал в консоли разработчика google 