Thursday, November 26, 2009

Integrating Google Map with Asp.net

Hi
In this project i have integrated google map with asp.net .To achieve this i used google API in java script and merge it with my c# code to give me the desired location .This map works for every address wordl wide.
Here is my .aspx code







Now I will explain what i have done.
1. I include the Maps API JavaScript using a script tag.
2. I create a div element named "map_canvas" to hold the Map.
3. I write a JavaScript function to create a "map" object.
4. I center the map on a given geographic point and set the UI to a default configuration.
5. I initialize the map object from the body tag's onLoad event.

GMap2
The JavaScript class that represents a map is the GMap2 class. Objects of this class define a single map on a page. (You may create more than one instance of this class - each object will define a separate map on the page.) We create a new instance of this class using the JavaScript new operator. When you create a new map instance, you specify a DOM node in the page (usually a div element) as a container for the map. HTML nodes are children of the JavaScript document object, and we obtain a reference to this element via the document.getElementById() method.

Loading the Google Maps API
The "http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAS0CLSrRmVbOFpr_bJyKH1xT4i6_Sq4XS6t48Z_RVvNgiFzkwmRSkqVbEIbgIBh-mPA-G_o0pQYjIpg URL points to the location of the JavaScript file that includes all of the symbols and definitions you need for using the Google Maps API. Your page must contain a script tag pointing to this URL, using the key you received when you signed up for the API. You can sign up for a key at http://code.google.com/apis/maps/signup.html .

Latitudes and Longitudes
Now that we have a map, we need a way to refer to locations on the map.The GLatLng object provides such a mechanism within the Google Maps API. You construct a GLatLng object, passing its parameters in the order { latitude, longitude } as is customary in cartography:

Markers
Points on the map are displayed using markers, and often display a custom icon. Markers are objects of type GMarker . markers can be both draggable and static.

Map Overlays
Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map. Overlays reflect objects that you "add" to the map to designate points, lines, or areas.

Now i move to my .cs code

using System;
using System.Data;
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;
using System.Net;

public partial class Gmap : System.Web.UI.Page
{
private const string _googleUri = "http://maps.google.com/maps/geo?q=";
private const string _googleKey = "ABQIAAAAS0CLSrRmVbOFpr_bJyKH1xT4i6_Sq4XS6t48Z_RVvNgiFzkwmRSkqVbEIbgIBh-mPA-G_o0pQYjIpg";
private const string _outputType = "csv";

protected void Page_Load(object sender, EventArgs e)
{

string[] st = GetCoordinates("Gulshanabad,rawalpindi,pakistan");
lat.Text = st[2].ToString();
longtitude.Text = st[3].ToString();


}
private static Uri GetGeocodeUri(string address)
{
address = HttpUtility.UrlEncode(address);
return new Uri(String.Format("{0}{1}&output={2}&key={3}", _googleUri, address, _outputType, _googleKey));
}
public static string[] GetCoordinates(string address)
{
WebClient client = new WebClient();
Uri uri = GetGeocodeUri(address);
string[] geocodeInfo = client.DownloadString(uri).Split(',');
return geocodeInfo;


}
}
here i used google's webservice in order to calculate latitude and longtitude values based on the address passed. at Page_Load i passed the address to the function name GetCoordinated(); the get coordinates then pass the address to GETGeocode () which sent the address to the webservice and return the output in CSV format.
in csv format values are seperated by commas. it return four values seperated by the ",". we only needed the last two values as we only require them .we split the return file and store it in a string and pass that string back.
string[] array size is four. we get the 3 and fourth location data (as these are the latitude and longtitude values which we will be needing as a location in our map).we will store the data in the labels already defined and access their values in our javascript code.

By this we are done and our google map is fully integrated with our asp.net , and it is properly functional.
Thanks

3 comments: