title: fetch the distance from google distance panel api v3
body: <p>I want to pull out the distance in kilometer from this Google distance panel example and do some math functions.</p>
  
  <p>Can any one please help..</p>
  
  <p><a href="https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-panel" rel="nofollow">https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-panel</a></p>
  
  <p>Thanks in advance</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Google Maps JavaScript API v3 Example: Directions Complex&lt;/title&gt;
      &lt;link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"&gt;
      &lt;style&gt;
      html, body {
          height: 100%;
          margin: 0;
          padding: 0;
      }
      #map_canvas {
          height: 100%;
      }
       @media print {
      html, body {
          height: auto;
      }
      #map_canvas {
          height: 650px;
      }
      }
      #directions-panel {
          height: 100%;
          float: right;
          width: 390px;
          overflow: auto;
      }
      #map-canvas {
          margin-right: 400px;
      }
      #control {
          background: #fff;
          padding: 5px;
          font-size: 14px;
          font-family: Arial;
          border: 1px solid #ccc;
          box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
          display: none;
      }
       @media print {
      #map-canvas {
          height: 500px;
          margin: 0;
      }
      #directions-panel {
          float: none;
          width: auto;
      }
      }
      &lt;/style&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
      &lt;script&gt;
                        var directionDisplay;
                        var directionsService = new google.maps.DirectionsService();
  
                        function initialize() {
                          directionsDisplay = new google.maps.DirectionsRenderer();
                          var mapOptions = {
                            zoom: 7,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            center: new google.maps.LatLng(41.850033, -87.6500523)
                          };
                          var map = new google.maps.Map(document.getElementById('map_canvas'),
                              mapOptions);
                          directionsDisplay.setMap(map);
                          directionsDisplay.setPanel(document.getElementById('directions-panel'));
  
                          var control = document.getElementById('control');
                          control.style.display = 'block';
                          map.controls[google.maps.ControlPosition.TOP].push(control);
                        }
  
                        function calcRoute() {
                          var start = document.getElementById('start').value;
                          var end = document.getElementById('end').value;
                          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);
                            }
                          });
                        }
  
                        google.maps.event.addDomListener(window, 'load', initialize);
                      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="control"&gt; &lt;strong&gt;Start:&lt;/strong&gt;
        &lt;select id="start" onChange="calcRoute();"&gt;
          &lt;option value="chicago, il"&gt;Chicago&lt;/option&gt;
          &lt;option value="st louis, mo"&gt;St Louis&lt;/option&gt;
          &lt;option value="joplin, mo"&gt;Joplin, MO&lt;/option&gt;
          &lt;option value="oklahoma city, ok"&gt;Oklahoma City&lt;/option&gt;
          &lt;option value="amarillo, tx"&gt;Amarillo&lt;/option&gt;
          &lt;option value="gallup, nm"&gt;Gallup, NM&lt;/option&gt;
          &lt;option value="flagstaff, az"&gt;Flagstaff, AZ&lt;/option&gt;
          &lt;option value="winona, az"&gt;Winona&lt;/option&gt;
          &lt;option value="kingman, az"&gt;Kingman&lt;/option&gt;
          &lt;option value="barstow, ca"&gt;Barstow&lt;/option&gt;
          &lt;option value="san bernardino, ca"&gt;San Bernardino&lt;/option&gt;
          &lt;option value="los angeles, ca"&gt;Los Angeles&lt;/option&gt;
        &lt;/select&gt;
        &lt;strong&gt;End:&lt;/strong&gt;
        &lt;select id="end" onChange="calcRoute();"&gt;
          &lt;option value="chicago, il"&gt;Chicago&lt;/option&gt;
          &lt;option value="st louis, mo"&gt;St Louis&lt;/option&gt;
          &lt;option value="joplin, mo"&gt;Joplin, MO&lt;/option&gt;
          &lt;option value="oklahoma city, ok"&gt;Oklahoma City&lt;/option&gt;
          &lt;option value="amarillo, tx"&gt;Amarillo&lt;/option&gt;
          &lt;option value="gallup, nm"&gt;Gallup, NM&lt;/option&gt;
          &lt;option value="flagstaff, az"&gt;Flagstaff, AZ&lt;/option&gt;
          &lt;option value="winona, az"&gt;Winona&lt;/option&gt;
          &lt;option value="kingman, az"&gt;Kingman&lt;/option&gt;
          &lt;option value="barstow, ca"&gt;Barstow&lt;/option&gt;
          &lt;option value="san bernardino, ca"&gt;San Bernardino&lt;/option&gt;
          &lt;option value="los angeles, ca"&gt;Los Angeles&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div id="directions-panel"&gt;&lt;/div&gt;
      &lt;div id="map_canvas"&gt;&lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>