Google Map Api Invalid Value Error

Question

I have created the following code using Google Maps API that should make a direction line on Google Maps between two given addresses. My Code is:

相关标签:

Answer 1

The geocoder is asynchronous, the results don't come back until after you place the call to the directions service.

A hint is this error in the javascript console: Uncaught TypeError: Cannot read property 'l' of null

Chain the geocoder calls (not sure why you need those, the directions service takes addresses just fine), move the call to the directions service into the callback function for the second geocode operation (so both locations are available when the directions service is called).

Another problem is you can't drive from Sydney to London.

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: -34.397,
      lng: 150.644
    }
  });

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

  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });

  var geocoder = new google.maps.Geocoder();

  var pointA, pointB;


  geocoder.geocode({
    'address': document.getElementById('addressFrom').value
  }, function(results, status) {
    if (status != "OK") return;
    var location = results[0].geometry.location;
    pointA = new google.maps.LatLng(location.lat(), location.lng());
    alert(location.lat() + ',' + location.lng());
    var markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "A",
      map: map
    });
    geocoder.geocode({
      'address': document.getElementById('addressTo').value
    }, function(results, status) {
      if (status != "OK") return;
      var location = results[0].geometry.location;
      pointB = new google.maps.LatLng(location.lat(), location.lng());
      alert(location.lat() + ',' + location.lng());
      var markerB = new google.maps.Marker({
        position: pointB,
        title: "point B",
        label: "B",
        map: map
      });
      calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
    });
  });
}

function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
  directionsService.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="addressFrom" type="textbox" value="Sydney" />
<input id="addressTo" type="textbox" value="London" />
<input id="submit" type="button" value="Geocode" onclick="initMap()" />
<div id="map"></div>

Answer 2

When you call the function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB); the positions pointAand pointB are undefined because they are the result of the asyncronous call of geocoder.geocode.

Move the calculateAndDisplayRoute function call after you've obtained a result from geocoder.geocode

  geocoder.geocode({
    'address': document.getElementById('addressTo').value
  }, function(results, status) {
    var location = results[0].geometry.location;
    poi

if (status == google.maps.GeocoderStatus.OK) {
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
    }

Since you're sending two geocoding requests you will need to wait for the geocoder status for each request.