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?
