<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<title>Demo</title>
<script type="text/javascript" src="_assets/js/plugins/modernizr-1.5.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function getLocation() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
alert("Sorry your browser does not support location services.");
location.href = "index.html";
}
}
function show_map(position) {
var latitude = position.coords.latitude,
longitude = position.coords.longitude,
device_location = latitude + "," + longitude;
directionsDisplay = new google.maps.DirectionsRenderer();
var nz = new google.maps.LatLng(-36.788164, 174.849029);
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: nz
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
//destination is hard coded for example - you could add a qs listener...
calcRoute(device_location,"100 Queen Street, Auckland");
}
function calcRoute(starthere,endhere) {
var start = starthere
var end = endhere
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 onload="getLocation()">
<div id="map_canvas"></div>
</body>
</html>