Home/ Questions/Q 769491
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T18:20:40+00:00

And that’s saying something. This is based on the Google Maps sample for Directions

  • 0

And that’s saying something. This is based on the Google Maps sample for Directions in the Maps API v3.

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Directions</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;


function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();

    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

function render() {
    var start;

    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          start = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        }, function() {
          handleNoGeolocation(browserSupportFlag);
        });
      } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation();
    }

    alert("booga booga");


    var end = '<?= $_REQUEST['destination'] ?>';
    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);
      }
    });
}

</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
<div><div id="map_canvas" style="float:left;width:70%; height:100%"></div> 
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div> 
<script type="text/javascript">render();</script>
</body> 
</html>

See that “alert(‘booga booga’)” in there?

With that in place, this all works fantastic. Comment that out, and var start is undefined when we hit the line to define var request.

I discovered this when I removed the alert I put in there to show me the value of var start, and it quit working. If I DO ask it to alert me the value of var start, it tells me it’s undefined, BUT it has a valid (and accurate!) value when we define var request a few lines later.

I’m suspecting it’s a timing issue–like an asynchronous something is having time to complete in the background in the moment it takes me to dismiss the alert. Any thoughts on work-arounds?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you’re assuming is correct navigator.geolocation.getCurrentPosition() is an asynchronous call finished while you’re dismissing that alert. To fix this you need to continue your work either from or in the callback function. To do that, rearrange your code to occur when it finishes, like this:

    function render() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var start = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
          var end = '<?= $_REQUEST['destination'] ?>';
          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);
            }
          });
        }, function() {
          handleNoGeolocation(browserSupportFlag);
        });
      } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation();
    }
}
    • 0