Run ยป
<!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="http://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>