Wednesday, November 10, 2010

Google map API distance C# javascript calling from code behind

Google map API distance C# javascript calling from code behind

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

<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

<!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>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API Example: Extraction of Geocoding Data</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script>
<!-- According to the Google Maps API Terms of Service you are required display a Google map when using the Google Maps API. see: http://code.google.com/apis/maps/terms.html -->
    <script type="text/javascript">
    
    var geocoder, location1, location2;
 
    

    function showLocation() {
        geocoder = new GClientGeocoder();
        geocoder.getLocations(document.forms[0].address1.value, function (response) {
            if (!response || response.Status.code != 200)
            {
                alert("Sorry, we were unable to geocode the first address");
            }
            else
            {
                location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                geocoder.getLocations(document.forms[0].address2.value, function (response) {
                    if (!response || response.Status.code != 200)
                    {
                        alert("Sorry, we were unable to geocode the second address");
                    }
                    else
                    {
                        location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                        calculateDistance();
                    }
                });
            }
        });
    }
 
    function calculateDistance()
    {
        try
        {
            var glatlng1 = new GLatLng(location1.lat, location1.lon);
            var glatlng2 = new GLatLng(location2.lat, location2.lon);
            var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
            var kmdistance = (miledistance * 1.609344).toFixed(1);
            //document.getElementById('results').innerHTML = '<strong>Address 1: </strong>' + location1.address + '<br /><strong>Address 2: </strong>' + location2.address + '<br /><strong>Distance: </strong>' + miledistance + ' miles (or ' + kmdistance + ' kilometers)';

            document.getElementById("Label1").innerHTML = '<strong>Address 1: </strong>' + location1.address + '<br /><strong>Address 2: </strong>' + location2.address + '<br /><strong>Distance: </strong>' + miledistance + ' miles (or ' + kmdistance + ' kilometers)';
        

        }
        catch (error)
        {
            alert(error);
        }
        
    }
 
    </script>
  </head>
 
  <body>
     
 
    <form id="wedkj"  runat="server">
   
      <p>
        <input type="text" name="address1" value="92610" class="address_input"
              size="40" />
        <input type="text" name="address2" value="92679" class="address_input"
              size="40" />
        
              
        <input type="submit" name="find" value="Search" />
       
        
      </p>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
     <asp:Button ID="Button1" runat="server"  Text="Button" onclick="Button1_Click"  />
     <asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" />
    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
    
     
    </form>
   
 
  </body>
</html>


using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;



public partial class Default10 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //Label1.Text = inpHide.Value;
       // Response.Write(Label1.innerHtml);

        //Response.Write("dsdsdsd");

       // Response.Write(Label2.Text);
      

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        //Response.Write("1111dssddsddsdssd");
        Button1.Attributes.Add("onclick", "showLocation(); return false;");

    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        //Response.Write(Label1.Text);
    }
}

2 comments:

Amar said...

Rajeev,
This is exactly what I was looking for. Infact I am getting a list of lat and long from sql DB and going to display in a table. how do I do that..I am kindof beginner for .net coding..
if you can post some sample code that will be really great.

Rajeev said...

@Amarnath check this out
http://mytechnicalcorner.blogspot.com/2009/02/google-yahoo-map-api-code-sample-for.html