Hi,
Following the series of question, this is the code as of now has been developed and working fine. Now need to make some more tweek with this
1. Instead of distance from source to destination in KM can we have it in Miles
2. I need to show the distance between source and destinace only if destination falls under 25 mile radius from source else need to show the label message that no record found.
Here is the code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="sqlmap.aspx.cs" Inherits="sqlmap" %>
<!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></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.onload = function () {
var addresses = document.getElementById("<%=hfAddresses.ClientID %>").value.split('{__New__}');
var mumbai = new google.maps.LatLng(18.9750, 72.8258);
var mapOptions = {
center: mumbai,
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var latlngbounds = new google.maps.LatLngBounds();
var markers = new Array();
for (i = 0; i < addresses.length; i++) {
var address = addresses[i];
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var Latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
var marker = new google.maps.Marker({
position: Latlng,
map: map,
title: results[0].formatted_address
});
markers.push(marker);
latlngbounds.extend(marker.position);
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
if (markers.length == addresses.length) {
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
} else {
alert("Request failed.")
}
});
}
}
</script>
<script type="text/javascript">
var source, destination, result;
//var result;
function GetRoute(destination, index) {
//*********DIRECTIONS AND ROUTE**********************//
source = document.getElementById("txtSource").value;
// destination = document.getElementById("txtDestination").value;
//destination = destination;
//alert(destination + "Destination " + index);
//*********DISTANCE AND DURATION**********************//
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
var distance = response.rows[0].elements[0].distance.text;
var duration = response.rows[0].elements[0].duration.text;
var dvDistance = document.getElementById("dvDistance");
//dvDistance.innerHTML = "";
// dvDistance.innerHTML += "Distance: " + distance + "<br />";
// dvDistance.innerHTML += "Duration:" + duration + "<br />";
result = distance;
//return distance
var foo = document.getElementById("<%= DataList1.ClientID %>");
var inps = foo.getElementsByTagName("div");
inps[index].innerHTML += " - Distance" + distance + " - " + duration;
} else {
alert("Unable to find the distance via road.");
}
});
}
//custom function
function UpdateLabelValues() {
var foo = document.getElementById("<%= DataList1.ClientID %>");
var inps = foo.getElementsByTagName("span");
//alert(inps.length);
for (var i = 0; i < inps.length; i++) {
// update the value as
GetRoute(inps[i].innerHTML, i);
// inps[i].innerHTML += " - Distanct:" + distance
//alert(result);
//alert(inps[i].innerHTML);
//inps[i].innerHTML = "";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>Output 1</h1>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
<asp:HiddenField ID="hfAddresses" runat="server" />
<h1>Output 2</h1>
<table border="0" cellpadding="0" cellspacing="3">
<tr>
<td>
Source:
<input id="txtSource" style="width: 200px" type="text"
value="255 CANAL ST, San Rafael CA" />
<input onclick="UpdateLabelValues()" type="button" value="Search" />
on click of search button it will show distances of the result in data
list below.
<br />
<%--<input onclick="GetRoute()" type="button" value="Get Route" />--%>
<hr />
</td>
</tr>
</table>
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<table style="width:100%;">
<tr>
<td>
</td>
<td>
<asp:Label ID="cityLabel" runat="server" Text='<%# Eval("city") %>' />
</td>
<%-- <td>
<asp:Label ID="Label1" runat="server"></asp:Label>
</td>--%>
<td>
<div ID="mydistance">
</div>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:babetopeConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:babetopeConnectionString1.ProviderName %>"
SelectCommand="SELECT address as City FROM Googlemap"></asp:SqlDataSource>
</form>
</body>
</html>
C# file
-----
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class sqlmap : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
List<string> addresses = new List<string>();
//addresses.Add("630 LAS GALLINAS, San Rafael CA");
//addresses.Add("2ND ST, Novato CA");
//addresses.Add("2402 SIR FRANCIS DRAKE BLVD, fairfax CA");
//addresses.Add("255 CANAL ST, San Rafael CA");
//addresses.Add("Pidc karachi");
//addresses.Add("Tariq Raod karachi");
//addresses.Add("Numaish karachi");
try
{
string ConString = ConfigurationManager.ConnectionStrings["babetopeConnectionString1"].ConnectionString;
string CmdString = "select address as city from GoogleMap";
SqlConnection con;
SqlCommand cmd;
SqlDataAdapter sda;
DataTable dt;
using (con = new SqlConnection(ConString))
{
cmd = new SqlCommand(CmdString, con);
con.Open();
dt = new DataTable("LocationDetails");
sda = new SqlDataAdapter(cmd);
sda.Fill(dt);
con.Close();
for (int i = 0; i < dt.Rows.Count; i++)
{
addresses.Add(dt.Rows[i]["city"].ToString());
////addresses.Add("PECHS Karachi");
//Response.Write(dt.Rows[i]["city"].ToString() + "{__New__}");
}
hfAddresses.Value = string.Join("{__New__}", addresses);
}
}
catch (Exception)
{
throw;
}
}
}
}
