CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps-api-3
Syed Lakhtey Hussnain
Syed Lakhtey Hussnain

Reputation: 63

Google Map Api Invalid Value Error

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: 

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) {
		var location = results[0].geometry.location;
		pointA = new google.maps.LatLng(location.lat(),location.lng());
		alert(location.lat() + '' + location.lng());
		});
		

        geocoder.geocode({'address': document.getElementById('addressTo').value}, function(results, status) {
		var location = results[0].geometry.location;
		pointB = 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
    });
	
	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);
    }
  });
}
<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>

I get the following errors when inspecting from the browser:

enter image description here

Upvotes: 2

Views: 6767

Answers (2)

geocodezip
geocodezip

Reputation: 161334

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>

Upvotes: 2

user2314737
user2314737

Reputation: 29307

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.

Upvotes: 0

Related Questions