<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps API v3 Example: Distance Matrix</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body
{
margin: 20px;
font-family: courier, sans-serif;
font-size: 12px;
}
#map
{
height: 480px;
width: 640px;
border: solid thin #333;
margin-top: 20px;
}
</style>
<script type="text/javascript">
var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];
var destinationIcon = "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000";
var originIcon = "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000";
function initialize() {
var opts = {
center: new google.maps.LatLng(55.53, 9.4),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), opts);
geocoder = new google.maps.Geocoder();
}
function calculateDistances() {
//*****Here we are giving the place or city name directly *****//
//***************www.dotnetcode.in******************************************
var origin1 =document.getElementById("txtsrc1").value;
alert(origin1);
var destinationA=document.getElementById("txtdest1").value;
var origin2=document.getElementById("txtsrc2").value;
var destinationB=document.getElementById("txtdest2").value;
alert(origin2);
//*** Uncommnet the below line if you are passing Latitude and logitude value***//
//***************www.dotnetcode.in******************************************
//var origin1 =new google.maps.LatLng(document.getElementById ("txtsrc1").value);
//var destinationA=new google.maps.LatLng(document.getElementById ("txtdest1").value);
//var orgin2=new google.maps.LatLng(document.getElementById ("txtsrc2").value);
//var destinationB=new google.maps.LatLng(document.getElementById ("txtdet2").value);
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin1, origin2],
destinations: [destinationA, destinationB],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = '';
deleteOverlays();
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);
for (var j = 0; j < results.length; j++) {
addMarker(destinations[j], true);
outputDiv.innerHTML += origins[i] + " to " + destinations[j]
+ ": " + results[j].distance.text + " in "
+ results[j].duration.text + "<br />";
}
}
}
}
function addMarker(location, isDestination) {
var icon;
if (isDestination) {
icon = destinationIcon;
} else {
icon = originIcon;
}
geocoder.geocode({'address': location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
});
markersArray.push(marker);
} else {
alert("Geocode was not successful for the following reason: "
+ status);
}
});
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div id="inputs">
<pre class="prettyprint">
<%--var origin1 = new google.maps.LatLng(55.930385, -3.118425);
var origin2 = "Greenwich, England";
var destinationA = "Stockholm, Sweden";
var destinationB = new google.maps.LatLng(50.087692, 14.421150);--%>
</pre>
<div>
Source 1<asp:TextBox ID="txtsrc1" runat="server"></asp:TextBox>
Destination 1<asp:TextBox ID="txtdest1" runat="server"></asp:TextBox>
</div>
<div>
Source 2<asp:TextBox ID="txtsrc2" runat="server"></asp:TextBox>
Destination 2<asp:TextBox ID="txtdest2" runat="server"></asp:TextBox>
</div>
<p>
<button type="button" onclick="calculateDistances();">
Calculate distances</button></p>
</div>
<div id="outputDiv">
</div>
<div id="map">
</div>
</form>
</body>
</html>
| 
