Introduction:
In my previous article, I explained Google Map with its control in C# and vb.net. This article will describe How to display route with Google Map.
You always show Google Map with their default controls set. You can display all this information by using Google Maps API.
Description:
Here I will show you how we can we get complete route map between two places. You have to add Google Maps API that is a JavaScript library.
Complete code is here;
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleMapC.aspx.cs" Inherits="GoogleMapC" %>
<!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 runat="server">
<title>Google Map With Different Properties</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<style type="text/css">
.map-prev {float: left; text-align: center; width: 100%;}
.map-right-iblock { width: 100%;}
.style-r-box1-b2 { width: 26px; border-radius: 7px; height: 26px; background-color: #e5e3df; border-color: #161ed4; border-style: solid; border-width: 2px; overflow: hidden; position: relative;}
#route { height: 100%; width: 68%; overflow: auto; margin-top: 3px; }
#route .adp { padding: 1% 2%; width: 35%; font-size: 12px; font-family: Arial;}
#map-canvas { height: 400px; margin-right: 0; width: 25%;}
#control { padding: 1% 2%; width: 25%; font-size: 14px; margin-top: 5px;}
#control > div {padding: 2px 0; }
#control > div strong { width: 50px; float: left; }
#control > div input[type=text] { border: 1px solid #000; width: 300px; height: 18px;}
#control > div input[type=button] { border: 1px solid #000; width: auto;}
</style>
<script type='text/javascript'>
var directionsDisplay; var geocoder;
var directionsService = new google.maps.DirectionsService();
function initialize() {
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(42.351505, -71.094455),
zoomControl: true,
panControl: true,
streetViewControl: true
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('route'));
var address = document.getElementById('end').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,
animation: google.maps.Animation.BOUNCE
});
var infowindow = new google.maps.InfoWindow({
content: document.getElementById('end').value
});
infowindow.open(map, marker);
}
});
var myNode = document.getElementById('route');
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', initialize);
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="map-prev">
<div class="map-right-iblock">
<div id="map-canvas" class="style-r-box1-b2">
</div>
<div id="route" style='float: left;'>
</div>
<div id="control">
<div>
<strong>Start:</strong>
<input id="start" type="text" /></div>
<div>
<strong>End:</strong>
<input id="end" type="text" /></div>
<div>
<strong> </strong><input id="btnSubmit" type="button" value="Submit" name="Search"
onclick="calcRoute();" /></div>
</div>
</div>
</div>
</form>
</body>
</html>
|
No comments:
Post a Comment