Home » » Compute Google Map Distance Estimate Among Two Cities

Compute Google Map Distance Estimate Among Two Cities

Written By Unknown on June 09, 2014 | Monday, June 09, 2014

This website allows you to find the space between cities or any two places using Google maps. The calculate distance will be publicized in miles and kilometers.

First You Shount placed the google map tool in inside the head tag
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

distance.js

To create the distance.js file.This file is the main script for calculation between two cites.
  var directionDisplay;
  var map;
   window.onload=function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer();
   var melbourne = new google.maps.LatLng(-37.813187, 144.96298);
   var myOptions = {
      zoom:12,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: melbourne
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
  }
  var directionsService = new google.maps.DirectionsService();

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);
    var distance = response.routes[0].legs[0].distance.value / 1000;
    document.getElementById("distance").value=distance;
    var amount = (document.getElementById("distance").value * 5);
    document.getElementById("amount").value = amount;
     }
  });
}

distance-between-two-cities.php

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
   <title>Distance Calculator between Two Cities</title>
   <style type="text/css">
      #map_canvas {
        height:400px;
    width:600px;
      }
    </style>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript" src="distance.js"></script> 
  </head>
 <body>
    <div>
      <p>
        <label for="start">Start: </label>
        <input type="text" name="start" id="start" />
        <label for="end">End: </label>
        <input type="text" name="end" id="end" />
        <input type="submit" value="Calculate Route" onclick="calcRoute()" />
      </p>
      <p>
       <label for="distance">Distance (km): </label>
       <input type="text" name="distance" id="distance" readonly="true" />
      </p>
   </div>
    <div id="map_canvas"></div>
  </body>
</html>

DEMO

Distance Calculator




Labels:

0 comments:

Post a Comment