title: when i press get route button i want my javascript variable to get stored in a database
body: <p>I want my data fetched from google maps api to be inserted into my (mysql) database.i want the data like source_address,destination_address,distance,duration of all the alternative routes to be inserted into my mysql database in just a click of get_route function that i wrote.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body
          {
          font-family: Arial;
          font-size: 10pt;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var source, destination; 
          var directionsDisplay;              // The whole map rendering or displaying.
  
          var directionsService = new google.maps.DirectionsService();  // For Availing the Direction Services provided by APIs
  
          google.maps.event.addDomListener(window, 'load', function () {              //  This acts as a pageload Function    
              new google.maps.places.SearchBox(document.getElementById('txtSource'));
              new google.maps.places.SearchBox(document.getElementById('txtDestination'));
              directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
          });
  
          function GetRoute() {
              var kolkata = new google.maps.LatLng(22.7383075, 88.454424);  // Center of the Map
              var mapOptions = {              // Setting the View of the Map
                  zoom: 7,
                  center: kolkata
              };
  
              map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);   // Variable for map view
  
              directionsDisplay.setMap(map);                              // Map view
  
              directionsDisplay.setPanel(document.getElementById('dvPanel'));  //Panel View
  
              //------------------------------DIRECTIONS AND ROUTE------------------------------------------------------
  
              source = document.getElementById("txtSource").value;
              destination = document.getElementById("txtDestination").value;
  
              var request =                        // variable request
          {                                   // DirectionsService
                  origin: source,
                  destination: destination,
          provideRouteAlternatives: true,
                  travelMode: google.maps.TravelMode.DRIVING
              };
  
              directionsService.route(request, function (response, status) {                  // RouteService
                  if (status == google.maps.DirectionsStatus.OK) {
                      directionsDisplay.setDirections(response);
                  }
              });
  
              //-----------------------------DISTANCE AND DURATION----------------------------------------------------
  
              var service = new google.maps.DistanceMatrixService();          // Different Services Provided by APIs
              service.getDistanceMatrix({
                  origins: [source],
                  destinations: [destination],
                  travelMode: google.maps.TravelMode.DRIVING,
                  unitSystem: google.maps.UnitSystem.METRIC,
                  avoidHighways: false,
                  avoidTolls: false
              }, function (response, status) {
                  if (status == google.maps.DistanceMatrixStatus.OK &amp;&amp; response.rows[0].elements[0].status != "ZERO_RESULTS") {
                      var distance = response.rows[0].elements[0].distance.text;    //  Distance Calculation From data provide by APIs
                      var duration = response.rows[0].elements[0].duration.text;      //  Duration Calculation From data provide by APIs
                      var dvDistance = document.getElementById("dvDistance");         // This Variable is for Fetching the Routes distance and displaying it on web page.
                      dvDistance.innerHTML = "";
                      dvDistance.innerHTML += "Distance: " + distance + "&lt;br /&gt;";
                      dvDistance.innerHTML += "Duration:" + duration;
  
                  } else {
                      alert("Unable to find the distance via road.");
                  }
              });
          }                            
  
      &lt;/script&gt;
      &lt;table border="0" cellpadding="0" cellspacing="3"&gt;
          &lt;tr&gt;
              &lt;td colspan="2"&gt;
                  Source:
                  &lt;input type="text" id="txtSource"  style="width: 200px" /&gt;
                  &amp;nbsp; Destination:
                  &lt;input type="text" id="txtDestination" style="width: 200px" /&gt;
                  &lt;br /&gt;
                  &lt;input type="button" value="Get Route" onclick="GetRoute()" /&gt;
                  &lt;hr /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2"&gt;
                  &lt;div id="dvDistance"&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div id="dvMap" style="width: 800px; height: 500px"&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div id="dvPanel" style="width: 500px; height: 500px"&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;br&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>