<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Search Along a Route Example</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var rendererOptions = {
draggable: true
};
var map = null;
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null; // km
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 4
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
routeBoxer = new RouteBoxer();
directionService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById ("directionsPanel"));
google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
route(directionsDisplay.directions);} )
}
function route() {
clearBoxes();
distance = parseFloat(document.getElementById("distance").val ue) * 1.609344;
var request = {
origin: document.getElementById("from").value,
destination: document.getElementById("to").value,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
directionService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
var path = result.routes[0].overview_path;
var boxes = routeBoxer.box(path, distance);
drawBoxes(boxes);
} else {
alert("Directions query failed: " + status);
}
});
}
function drawBoxes(boxes) {
boxpolys = new Array(boxes.length);
for (var i = 0; i < boxes.length; i++) {
boxpolys[i] = new google.maps.Rectangle({
bounds: boxes[i],
fillOpacity: 0,
strokeOpacity: 1.0,
strokeColor: '#000000',
strokeWeight: 1,
map: map
});
}
}
function clearBoxes() {
if (boxpolys != null) {
for (var i = 0; i < boxpolys.length; i++) {
boxpolys[i].setMap(null);
}
}
boxpolys = null;
}
</script>
<style type ="text/css" >
#map {
border: 1px solid black;
}
#controls {
font-family: sans-serif;
font-size: 11pt;
margin-top: 10px;
margin-left: 20px;
</style>
</head>
<body onload="initialize();">
<table>
<tr>
<td>
<div id="map" style="width: 812px; height: 550px;"></div>
<div id="controls">
<input type="text" id="distance" value="" size="2"/><br/>
de
<input type="text" id="from" value=""/>
A
<input type="text" id="to" value=""/>
<input type="submit" onclick="route()"/>
</div>
</td>
</tr>
<tr>
<td>
<div id="directionsPanel" ></div>
gsdgsdgsdgsds
</td>
</tr>
</table>
</body>
</html>