Guest User

JQuery and Google Maps API

a guest
Mar 31st, 2012
362
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5.     <style type="text/css">
  6.       html { height: 100% }
  7.       body { height: 100%; margin: 0; padding: 0 }
  8.       #map_canvas { height: 100% }
  9.     </style>
  10.     <script type="text/javascript"
  11.       src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDRSgWDqKjYgsJJKqBIfsQGpX4P_FxJLyg&sensor=false">
  12.     </script>  
  13.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  14.  
  15.     <script type="text/javascript">
  16.  
  17.     var directionsDisplay;
  18.     var directionsService = new google.maps.DirectionsService();
  19.     var map;
  20.     var dist =0;
  21.  
  22.     function initialize() {
  23.       directionsDisplay = new google.maps.DirectionsRenderer();
  24.       var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  25.       var myOptions = {
  26.         zoom:7,
  27.         mapTypeId: google.maps.MapTypeId.ROADMAP,
  28.         center: chicago
  29.       }
  30.       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  31.       directionsDisplay.setMap(map);
  32.     }
  33.  
  34.     $(document).ready(function(){
  35.         $("#send").click(function(event){
  36.             calcRoute();
  37.             $("#result").html(dist);
  38.         });
  39.          
  40.     });
  41.    
  42.     function calcRoute() {
  43.       var start = document.getElementById("from").value;
  44.       var end = document.getElementById("to").value;
  45.       var ret = 0;
  46.       var request = {
  47.         origin:start,
  48.         destination:end,
  49.         travelMode: google.maps.TravelMode.DRIVING
  50.       };
  51.       directionsService.route(request, function(result, status) {
  52.         if (status == google.maps.DirectionsStatus.OK) {
  53.           directionsDisplay.setDirections(result);
  54.           dist = result.routes[0].legs[0].distance.value;
  55.         }else{
  56.             alert("Error");
  57.         }
  58.       });  
  59.        
  60.     }  
  61.    
  62.    
  63.    
  64.     </script>
  65.   </head>
  66.   <body onload="initialize()">  <div>
  67.         <input type="text" name="from" id="from"/><br />
  68.         <input type="text" name="to" id="to"/><br />       
  69.         <a href="#" id="send">Get</a>
  70. </div>
  71. <div id="result"></div>
  72.     <div id="map_canvas" style="width:50%; height:50%"></div>
  73.   </body>
  74. </html>
Add Comment
Please, Sign In to add comment