Technical Corner: February 2009

Sample working code Latitude & Longitude by using Yahoo API C# putting in a table after that passing that latitude and longitude to google map api to display driving direction.Technology used SQL-SERVER,asp.net 2.0 , C#, Javascript.

@ Page Language="C#" AutoEventWireup="true" CodeFile="dispdist.aspx.cs" Inherits="dispdist" %>

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>Distance from your address</title>

head>

body>

<div>

<tr>

<td>

</td>

<asp:Label ID="Label5" runat="server" Text="From Address:"></asp:Label></td>

<td>

 </td>

</td>

</tr>

<tr>

<asp:Label ID="Label1" runat="server" Text="Address:"></asp:Label></td>

<asp:TextBox ID="txtadd1" runat="server">26502 Towne Center</asp:TextBox></td>

<asp:Label ID="Label4" runat="server" Text="City:"></asp:Label></td>

<asp:TextBox ID="txtcity" runat="server">Foothill Ranch</asp:TextBox></td>

</tr>

<tr>

<asp:Label ID="Label2" runat="server" Text="State:"></asp:Label> </td>

<asp:TextBox ID="txtstate" runat="server">CA</asp:TextBox></td>

<td>

<asp:Label ID="Label3" runat="server" Text="Zip:"></asp:Label></td>

<asp:TextBox ID="txtzip" runat="server">92610</asp:TextBox></td>

</tr>

<tr>

</td>

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" CssClass="but" /></td>

<td>

</td>

</td>

</tr>

<tr>

</td>

 </td>

<td>

</td>

</td>

</tr>

<tr>

<td>

</td>

</td>

<td>

</td>

</td>

</tr>

</table>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="aban8" CssClass="GridViewStyle"

DataSourceID="SqlDataSource1" AutoGenerateSelectButton="false" OnRowDataBound="gridViewMaster_RowDataBound"

AllowPaging="false" PageSize="5" Width="80%"

<asp:BoundField DataField="Address" HeaderText="Address" ReadOnly="True" SortExpression="Address" />

<asp:BoundField DataField="aban8" HeaderText="AddressNo" ReadOnly="True" SortExpression="aban8" />

<asp:BoundField DataField="abalph" HeaderText="Company" SortExpression="abalph" />

<asp:BoundField DataField="aladd1" HeaderText="Address" SortExpression="aladd1" />

<asp:BoundField DataField="alcty1" HeaderText="City" SortExpression="alcty1" />

<asp:BoundField DataField="aladds" HeaderText="State" SortExpression="aladds" />

<asp:BoundField DataField="alctr" HeaderText="Country" SortExpression="alctr" />

<asp:BoundField DataField="aladdz" HeaderText="Zip" SortExpression="aladdz" />

<asp:BoundField DataField="longi" HeaderText="longi" SortExpression="longi" Visible="false" />

<asp:BoundField DataField="lati" HeaderText="lati" SortExpression="lati" Visible="false" />

<asp:BoundField DataField="distance" HeaderText="distance" SortExpression="distance" />

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:JDE_RKConnectionString %>"

></asp:SqlDataSource>

</center>

</div>

</form>

body>

html>

code Behind

using

System;

using

System.Data;

using

System.Data.SqlClient;

using

System.Configuration;

using

System.Collections;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

public

partial class dispdist : System.Web.UI.Page

{

private GeoAddressAPI geoAPI = new GeoAddressAPI();

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Button1_Click(object sender, EventArgs e)

{

GeoAddress address = geoAPI.GeoEncodeAddress(txtadd1.Text, txtcity.Text, txtstate.Text, txtzip.Text);

// Response.Write(address.Latitude);

//Response.Write("<br>");

// Response.Write(address.Longitude);

string strConnection = "server=DatabaseProd;database=production;uid=sa;pwd=xxxxx;Connect Timeout=60";

SqlConnection myConn = new SqlConnection(strConnection);

string query = "select top 10 longi,lati,aban8 from jde_rk.dbo.latlongad order by distance";

SqlCommand myCommand = new SqlCommand(query, myConn);

myCommand.Connection.Open();

SqlDataReader myReader = myCommand.ExecuteReader();

while (myReader.Read())

{

double frmlat = Convert.ToDouble(address.Latitude);

double frmlong = Convert.ToDouble(address.Longitude);

double tolat = myReader.GetDouble(1);

double tolong = myReader.GetDouble(0);

double totdist= distanceCal(frmlong, frmlat, tolong, tolat, 'M');

string totdist1 = totdist.ToString();

editdist(myReader.GetString(2), totdist1);

}

myReader.Close();

myConn.Close();

//double totdist = distanceCal(flatitude, flongitude, tlatitude, tlongitude, 'K') * 0.62;

//SelectCommand="SELECT * FROM [latlongad]"

//SqlDataSource1.SelectCommand = "SELECT * FROM [latlongad] order by distance";

SqlDataSource1.SelectCommand =

"SELECT top 10 rtrim(aladd1)+','+rtrim(alcty1)+','+rtrim(aladds)+','+rtrim(alctr)Address ,* FROM [latlongad] order by distance";

}

private double distanceCal(double Lat1, double Long1, double Lat2, double Long2, char unit)

{

double dDistance = Double.MinValue;

double dLat1InRad = Lat1 * (Math.PI / 180.0);

double dLong1InRad = Long1 * (Math.PI / 180.0);

double dLat2InRad = Lat2 * (Math.PI / 180.0);

double dLong2InRad = Long2 * (Math.PI / 180.0);

double dLongitude = dLong2InRad - dLong1InRad;

double dLatitude = dLat2InRad - dLat1InRad;

// Intermediate result a.

double a = Math.Pow(Math.Sin(dLatitude / 2.0), 2.0) + Math.Cos(dLat1InRad) * Math.Cos(dLat2InRad) * Math.Pow(Math.Sin(dLongitude / 2.0), 2.0);

// Intermediate result c (great circle distance in Radians).

double c = 2.0 * Math.Atan2(Math.Sqrt(a), Math.Sqrt(1.0 - a));

// Distance.

// const Double kEarthRadiusMiles = 3956.0;

const Double kEarthRadiusKms = 6376.5;

dDistance = kEarthRadiusKms * c;

return dDistance;

}

void editdist(string aban8, string distance)

{

SqlConnection myConnection = new SqlConnection(ConnectionString);

string strSQL = "UPDATE jde_rk.dbo.latlongad SET distance=@distance WHERE aban8 ='" + aban8 + "' ";

SqlCommand cmd = new SqlCommand(strSQL, myConnection);

cmd.CommandType =

CommandType.Text;

cmd.Parameters.AddWithValue(

"@distance", distance.ToString());

myConnection.Open();

cmd.ExecuteNonQuery();

myConnection.Close();

}

protected void gridViewMaster_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

string faddress = txtadd1.Text +","+txtcity.Text +","+txtstate.Text;

// Response.Redirect("");

e.Row.Attributes[

"onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';";

e.Row.Attributes[

"onmouseout"] = "this.style.textDecoration='none';";

// e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.GridView1, "Select$" + e.Row.RowIndex);

e.Row.Attributes.Add(

"onclick", "window.location = 'Default8.aspx?type="+faddress+"&LeadID=" + DataBinder.Eval(e.Row.DataItem, "Address") + "';");

}

private string ConnectionString

{

get

{

string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString1"].ConnectionString;

return connectionString;

}

Google map api javascript

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>

<title>Google Maps JavaScript API Example: Directions + Static Map</title>

type="text/javascript"></script>

body {

font-family: Verdana, Arial, sans serif;

font-size: 11px;

margin: 2px;

}

table.directions th {

background-color:#EEEEEE;

}

img {

color: #000000;

}

</style>

var map;

var gdir;

var geocoder = null;

var addressMarker;

//alert(QueryVariable);

function initialize() {

if (GBrowserIsCompatible()) {

map =

new GMap2(document.getElementById("map_canvas"));

gdir =

new GDirections(map, document.getElementById("directions"));

GEvent.addListener(gdir,

"addoverlay", onGDirectionsLoad);

GEvent.addListener(gdir,

"error", handleErrors);

var queryString = new String();

queryString = window.location.search;

queryString = queryString.substring(1);

// document.getElementById("div1").innerHTML = queryString + "<br />";

var arr1 = new Array();

arr1 = queryString.split(

"&");

var arr2 = new Array();

var tempval;

var tempval1;

for(var i = 0; i<arr1.length; i++)

{

arr2[i] = arr1[i].toString().substring(arr1[i].toString().indexOf(

"=") + 1);

arr1[i] = arr1[i].toString().substring(0,arr1[i].toString().indexOf(

"="));

if (i==0)

{

tempval= arr2[0].toString();

}

if (i==1)

{

tempval1= arr2[1].toString();

}

// document.getElementById("div1").innerHTML += arr1.concat() + "<br />";

// document.getElementById("div1").innerHTML += arr2.concat();

document.getElementById(

"fromAddress").innerText=tempval ;

document.getElementById(

"toAddress").innerText=tempval1 ;

var fdirc=tempval;

var tdirc=tempval1;

setDirections(fdirc, tdirc,

"en_US");

}

function setDirections(fromAddress, toAddress, locale)

{

gdir.load(

"from: " + fromAddress + " to: " + toAddress,

{

"locale": locale });

}

function handleErrors(){

if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)

alert(

"No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)

alert(

"A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)

alert(

"The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_BAD_KEY)

alert(

"The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)

alert(

"A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);

else alert("An unknown error occurred.");

}

function onGDirectionsLoad(){

var poly = gdir.getPolyline();

if (poly.getVertexCount() > 100) {

// alert("This route has too many vertices");

return;

}

var baseUrl = "http://maps.google.com/staticmap?";

var params = [];

var markersArray = [];

markersArray.push(poly.getVertex(0).toUrlValue(5) +

",greena");

markersArray.push(poly.getVertex(poly.getVertexCount()-1).toUrlValue(5) +

",greenb");

params.push(

"markers=" + markersArray.join("|"));

var polyParams = "rgba:0x0000FF80,weight:5|";

var polyLatLngs = [];

for (var j = 0; j < poly.getVertexCount(); j++) {

polyLatLngs.push(poly.getVertex(j).lat().toFixed(5) +

"," + poly.getVertex(j).lng().toFixed(5));

}

params.push(

"path=" + polyParams + polyLatLngs.join("|"));

params.push(

"size=300x300");

params.push(

"key=ABQIAAAAqIgtWyiOtP6QBTeyzVln2hQyDHt7JDG3iBXpfs6LRlLb1WavxBQ4WvuAL-v0NSB7koPUpk8oR28XeA");

baseUrl += params.join(

"&");

var extraParams = [];

extraParams.push(

"center=" + map.getCenter().lat().toFixed(6) + "," + map.getCenter().lng().toFixed(6));

extraParams.push(

"zoom=" + map.getZoom());

addImg(baseUrl +

"&" + extraParams.join("&"), "staticMapOverviewIMG");

var extraParams = [];

extraParams.push(

"center=" + poly.getVertex(0).toUrlValue(5));

extraParams.push(

"zoom=" + 15);

addImg(baseUrl +

"&" + extraParams.join("&"), "staticMapStartIMG");

var extraParams = [];

extraParams.push(

"center=" + poly.getVertex(poly.getVertexCount()-1).toUrlValue(5));

extraParams.push(

"zoom=" + 15);

addImg(baseUrl +

"&" + extraParams.join("&"), "staticMapEndIMG");

//alert(lstrDistance);

}

function

addImg(url, id) {

var img = document.createElement("img");

img.src = url;

document.getElementById(id).innerHTML =

"";

document.getElementById(id).appendChild(img);

}

</script>

</head>

<h2>Maps and Directions </h2>

</center>

<td align="right"><input type="text" size="25" id="toAddress" name="to"

value="Mountain View" /></td></tr>

<tr><th>Language: </th>

<option value="en" selected>English</option>

<option value="fr">French</option>

<option value="de">German</option>

<option value="ja">Japanese</option>

<option value="es">Spanish</option>

</select>

<asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label></td></tr>

</table>

</form>

<br/>

<tr><th>Formatted Directions</th><th style="width: 313px">Map</th></tr>

<tr>

</tr>

</table>

hr>

center>

br clear="all"/>

center>

</body>

html>

Technical Corner

Tuesday, February 24, 2009

Google Yahoo Map API code sample for store locator C# asp.net javascript

Contributors