<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Find a route using Geolocation and Google Maps API</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
#map {
width: 100%;
height: 400px;
margin-top: 10px;
}
.myform {
width: 50%;
background-color: orange;
padding-top: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<form id="calculate-route" class="myform" name="calculate-route" action="#" method="get">
<div class="form-group">
<label class="control-label col-sm-2" for="from">From:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="from" placeholder="Source"><a href=""></a>
</div>
</div>
<br>
<br>
<br>
<div class="form-group">
<label class="control-label col-sm-2" for="to">To:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="to" placeholder="Destination">
</div>
</div>
<br>
<br>
<center> <input type="submit" class="btn btn-success" />
<input type="reset" class="btn btn-success" />
</center>
</form>
<div id="map"></div>
<p id="error"></p>
<script>
function calculateRoute(from, to) {
/* Center initialized to Naples, Italy */
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(40.84, 14.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
/* Draw the map */
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(
directionsRequest,
function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
new google.maps.DirectionsRenderer({
map: mapObject,
directions: response
});
} else
$("#error").append("Unable to retrieve your route<br />");
}
);
}
$(document).ready(function() {
/* If the browser supports the Geolocation API */
if (typeof navigator.geolocation == "undefined") {
$("#error").text("Your browser doesn't support the Geolocation API");
return;
}
$("#from-link, #to-link").click(function(event) {
event.preventDefault();
var addressId = this.id.substring(0, this.id.indexOf("-"));
navigator.geolocation.getCurrentPosition(function(position) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
$("#" + addressId).val(results[0].formatted_address);
else
$("#error").append("Unable to retrieve your address<br />");
});
},
function(positionError) {
$("#error").append("Error: " + positionError.message + "<br />");
}, {
enableHighAccuracy: true,
timeout: 10 * 1000 /* 10 seconds */
});
});
$("#calculate-route").submit(function(event) {
event.preventDefault();
calculateRoute($("#from").val(), $("#to").val());
});
});
</script>
</body>
</html>