Сложность с Google Maps API

Question

Я пытаюсь создать простую программу, которая принимает конкретно два специально размещенных пункта назначения и показывает направления между ними. По какой-то причине я просто не могу получить указания, чтобы появиться.

<script>
  var directionsService = new google.maps.directionsService();
  var directionsDisplay = new google.maps.directionsRenderer();

  var new_york = {lat: 40.7128, lng: -74.0060};
  var los_angeles = {lat: 34.0522, lng: -118.2437};

  function initMap() {
    var mapMarkers = [];
    var map = new google.maps.Map(
        document.getElementById('map'), {zoom: 4, center: {lat: 40, lng: -99}}
    );
    var marker1 = new google.maps.Marker({
      position: new_york, 
      map: map, 
      title: 'Home'
    });
    var marker2 = new google.maps.Marker({
      position: los_angeles, 
      map: map, 
      title: 'School'
    });
  }
  calculateAndDisplayRoute: function(directionsService, directionsDisplay, new_york, los_angeles) {
  directionsService.route({
    origin: new_york,
    destination: los_angeles,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
    directionsDisplay.setDirections(response);
    } else {
    alert('Directions request failed due to ' + status);
    }
  });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmA98U4We-2IAaHbxa354v_C91IktiSKM3&callback=calculateAndDisplayRoute"></script>

Answer 1

Я думаю, что есть несколько проблем с вашим кодом, во-первых, вы должны знать, что библиотека карт Google должна быть загружена, прежде чем вы сможете создавать новые экземпляры DirectionsService и DirectionsRenderer, что, кстати, должно быть в CamelCase:

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

Поскольку вы не загружаете библиотеку карт асинхронно, вы можете поместить скрипт вверху страницы и просто удалить аргумент обратного вызова.Я сделал несколько изменений в вашем коде, пожалуйста, проверьте его ниже (вам нужно добавить свой ключ API):

var new_york = {lat: 40.7128, lng: -74.0060};
var los_angeles = {lat: 34.0522, lng: -118.2437};

function initMap() {
  var mapMarkers = [];

  var map = new google.maps.Map(
    document.getElementById('map'), {zoom: 4, center: {lat: 40, lng: -99}}
  );

  var marker1 = new google.maps.Marker({
    position: new_york, 
    map: map, 
    title: 'Home'
  });

  var marker2 = new google.maps.Marker({
    position: los_angeles, 
    map: map, 
    title: 'School'
  });
}
      
function calculateAndDisplayRoute() { 
  initMap();

  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();

  var route = {
    origin: new_york,
    destination: los_angeles,
    travelMode: 'DRIVING'
  };

  directionsService.route(route, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      alert('Directions request failed due to ' + status);
    }
  });
}

calculateAndDisplayRoute();

<script src="https://maps.googleapis.com/maps/api/js?key=???"></script>
<div id="map" style="width: 100%; height: 500px;"></div>