janhocevar/distanceinput.js

## distanceinput.js
var distanceInput = document.getElementById("distance");

## index.html
<html>
  <head>
    <title>Distance Calculator</title>
    <style type="text/css">
      #map_canvas {
        height: 100%;
      }
    </style>
  </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" />
      </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>

## init-body.html
<body onload="initialize()">

## init.html
<script type="text/javascript">
  var directionDisplay;
  var map;

  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);
  }
</script>

## js.js
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);
    }
  });
}

## legs.js
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;

## map.html
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

## submit.html
<input type="submit" value="Calculate Route" onclick="calcRoute()" />
	<html>
	<head>
	<title>Distance Calculator</title>
	<style type="text/css">
	#map_canvas {
	height: 100%;
	}
	</style>
	</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" />
	</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>
	<script type="text/javascript">
	var directionDisplay;
	var map;

	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);
	}
	</script>
	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);
	}
	});
	}
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>