Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
- <style type="text/css">
- html { height: 100% }
- body { height: 100%; margin: 0; padding: 0 }
- #map_canvas { height: 100% }
- </style>
- <script type="text/javascript"
- src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDRSgWDqKjYgsJJKqBIfsQGpX4P_FxJLyg&sensor=false">
- </script>
- <script src="http://code.jquery.com/jquery-latest.js"></script>
- <script type="text/javascript">
- var directionsDisplay;
- var directionsService = new google.maps.DirectionsService();
- var map;
- var dist =0;
- function initialize() {
- directionsDisplay = new google.maps.DirectionsRenderer();
- var chicago = new google.maps.LatLng(41.850033, -87.6500523);
- var myOptions = {
- zoom:7,
- mapTypeId: google.maps.MapTypeId.ROADMAP,
- center: chicago
- }
- map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
- directionsDisplay.setMap(map);
- }
- $(document).ready(function(){
- $("#send").click(function(event){
- calcRoute();
- $("#result").html(dist);
- });
- });
- function calcRoute() {
- var start = document.getElementById("from").value;
- var end = document.getElementById("to").value;
- var ret = 0;
- var request = {
- origin:start,
- destination:end,
- travelMode: google.maps.TravelMode.DRIVING
- };
- directionsService.route(request, function(result, status) {
- if (status == google.maps.DirectionsStatus.OK) {
- directionsDisplay.setDirections(result);
- dist = result.routes[0].legs[0].distance.value;
- }else{
- alert("Error");
- }
- });
- }
- </script>
- </head>
- <body onload="initialize()"> <div>
- <input type="text" name="from" id="from"/><br />
- <input type="text" name="to" id="to"/><br />
- <a href="#" id="send">Get</a>
- </div>
- <div id="result"></div>
- <div id="map_canvas" style="width:50%; height:50%"></div>
- </body>
- </html>
Add Comment
Please, Sign In to add comment