https://maps.googleapis.com/maps/api Les requêtes de récupération des applications Web en JavaScript front-end ne sont pas prises en charge, de la même manière que votre code essaie de l'utiliser.

Au lieu de cela, vous devez utiliser l'API JavaScript Google Maps prise en charge, dont le code client est différent de ce que vous essayez de faire. Un exemple de service matriciel de distanceest le suivant :

<script>
  var service = new google.maps.DistanceMatrixService;
  service.getDistanceMatrix({
    origins: [origin1, origin2],
    destinations: [destinationA, destinationB],
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
},…
</script>

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Voici un exemple d'utilisation de l'API Place Autocomplete en utilisant la bibliothèque Places  :

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });
    ...
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);
    var marker = new google.maps.Marker({
      map: map,
      anchorPoint: new google.maps.Point(0, -29)
    });
</script>
<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
  async defer></script>

Utiliser l'API Maps JavaScript comme ceci - en chargeant la bibliothèque à l'aide de l'élément

Google n'autorise intentionnellement pas l'accès à l'API Google Maps en envoyant des requêtes via d'autres bibliothèques comme les méthodes axios ou AJAX ou en utilisant directement l'API XHR ou Fetch.