CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Jeevan Dongre
Jeevan Dongre

Reputation: 4649

problem with google directions api

A user comes to my web app and locates the destination address but he does not locate the source location and publishes the page. The normal user who are not registered to the web app adds the source location.

Once the user adds the source location he is not able to see the exact direction map, rather the google is displaying the default maps.

Here is the exception giving when we used chrome console.

I have added the code here and also the exception I am getting 

Error Name:
main.js:41Uncaught TypeError:Object#<object> has no method 'Load'


function calcRoute() {
    showDirections();
  document.getElementById('directionsPanel').innerHTML="";
    initialize();
  var start = document.getElementById("txt_from").value;
  var end = getDestinationAdderss(document.getElementById('final_address').innerHTML);
  var request = {
    origin:start, 
    destination:end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

enter image description here

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var myOptions = {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById("map_canvas_directions"), myOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

Upvotes: 0

Views: 2078

Answers (2)

Trott
Trott

Reputation: 70163

The debug screenshot indicates that initialize() is the last bit of code run in your file before Google Maps API throws the error. So look in there (and/or provide that code in your question).

UPDATE: Based on your code, the first to check might be to make sure that there is an element with an id of map_canvas_directions and another one with an id of directionsPanel. There's not enough information to say for sure, but if I had to guess, your UI changes got rid of one or the other of those elements, but your code requires them.

UPDATE TO THE UPDATE: Replacing the stuff in the DirectionsRenderer() constructor as @Arjan suggests is also a likely cause of your problem so definitely try that too!

Upvotes: 2

Arjan
Arjan

Reputation: 9884

You have removed some code that is present in the Google sample.

directionsDisplay = new google.maps.DirectionsRenderer({
    'map': map,
    'preserveViewport': true,
    'draggable': true
});

I expect that your code is working again if you add the code above in the proper place. If not, you really should start with the sample code again, since that does work.

Upvotes: 3

Related Questions