File -> Open-> New Website
AddNewItem->WebForm->Default.aspx
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script language="javascript" type="text/javascript">
var directionsDisplay;
var directionsService = new
google.maps.DirectionsService();
function show() {
var tableid = document.getElementById('tbgetdirection');
tableid.style.display = 'block';
}
function InitializeMap() {
directionsDisplay = new
google.maps.DirectionsRenderer();
var latlng = new
google.maps.LatLng(17.425503, 78.47497);
var myOptions1 =
{
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map"),
myOptions1);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionpanel'));
var control = document.getElementById('control');
control.style.display = 'block';
}
function calcRoute() {
InitializeMap();
var start = document.getElementById('startvalue').value;
var end = document.getElementById('endvalue').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);
}
});
}
function Button1_onclick() {
calcRoute();
window.onload = InitializeMap;
var directiondiv = document.getElementById('directionpanel');
directiondiv.style.display = 'block';
}
window.onload = InitializeMap;
var map;
var geocoder;
function InitializeMap1() {
var latlng = new
google.maps.LatLng(17.425503, 78.47497);
var myOptions =
{
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
map =
new google.maps.Map(document.getElementById("map"), myOptions);
}
function FindLocaiton() {
geocoder = new google.maps.Geocoder();
InitializeMap1();
var address = document.getElementById("addressinput").value;
geocoder.geocode({ 'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new
google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert("Geocode was not successful for
the following reason: " + status);
}
});
}
function Button2_onclick() {
FindLocaiton();
window.onload = InitializeMap1;
var tableid = document.getElementById('tbgetdirection');
tableid.style.display = 'none';
var directiondiv = document.getElementById('directionpanel');
directiondiv.style.display = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr><td>
<input id="addressinput"
type="text"
style="width: 447px" />
</td><td>
<input id="Button2"
type="button"
value="Search"
onclick="return
Button2_onclick()"/>
<br />
</td></tr>
</table>
<div>
<table id ="control">
<tr><td>
<input id="Button3" type="button" value="GetDirections" onclick="show()" /></td>
</td></tr>
<tr><td>
<table id="tbgetdirection" style="display:none;">
<tr>
<td>From:</td>
<td>
<input id="startvalue"
type="text"
style="width: 305px" /></td>
</tr><tr>
<td>To:</td>
<td><input id="endvalue" type="text" style="width: 301px" /></td>
</tr><tr>
<td align ="right">
<input id="Button1"
type="button"
value="Go"
onclick="return
Button1_onclick()" /></td>
</tr>
</table>
</td></tr>
<tr>
<td valign ="top">
<div id ="directionpanel" style=" display:none; height: 390px;overflow: auto" ></div>
</td>
<td valign ="top">
<div id ="map" style="height: 390px; width: 654px"></div>
</td></tr>
</table>
</div>
</form>
</form>
</body>
</html>
DEMO:
Enter Search Location and click on search
To Get Directions click on get Direction you will find From and To
Enter From And To places and click on Go you can see the route map and also the directions
