Integrating Google Map to your ASP.NET Application
by Shashidhar P T
May 16th 08

This article explains how to integrate Google map to ASP.NET Application. We need to provide the latitude and longitude to Google map which in turn it will show the location of the person. Need to follow few steps to integrate Google map in your application.

Page index

Starting up
Variable declarations
Passing the address and API Key to Google Map URL
Process of using the data sent by Google
Design Goes Here

Starting up

Step 1: First you need to get the Google map API key using the URL http://code.google.com/apis/maps/signup.html.

Step 2: Store the API key in the web.config

Code

Variable declarations

Note

namespace required: using System.Net;

Code

public string googleMapsAPIURL = string.Empty;
public string lattitude = string.Empty;
public string longitude = string.Empty;
public string Address = string.Empty;
private string Code = string.Empty;
private string[] downloadedDataArray = new string[10];

Passing the address and API Key to Google Map URL

Pass the API Key

Code

string googleAPIKey = ConfigurationManager.AppSettings["DevKey"];
googleMapsAPIURL = string.Format("">http://maps.google.com/maps?file=api&v=2&key={0}", googleAPIKey);

Pass the API Key and Address to request geo code which contains code,latitude, longitude, ranking

Code

string requestURL = string.Format("">http://maps.google.com/maps/geo?q={0}&output=csv&key={1}",
Server.UrlEncode(Address), googleAPIKey);

Process of using the data sent by Google

Dowload all the data using WebClient() class

Code

string downloadedData = string.Empty;
using (WebClient wc = new WebClient())
{
byte[] b = wc.DownloadData(requestURL);
downloadedData = System.Text.ASCIIEncoding.ASCII.GetString(b);
}

Extract the CODE

Code

string[] downloadDataDelimiter = { "," };
downloadedDataArray = downloadedData.Split(downloadDataDelimiter, StringSplitOptions.None);
Code = downloadedDataArray[0];

Retrieve the data based on return CODE

Code

if (Code == "200")
        {
            lattitude = downloadedDataArray[2];
            longitude = downloadedDataArray[3];
        }
else
{
   Response.Write("<b><i><font color='red'> Invalid Address");
}

Design Goes Here

Code

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps Directions for Practice - ></title>

  //setting default maptype.
  //there are 3 types. 1)map 2)satelite and 3)hybrid
  var givenmaptypes = map.getMapTypes();
  map.setMapType(givenmaptypes[2]);

  //creating marker/
  var marker = new GMarker(center, {draggable: true, bouncy: true});
  map.addOverlay(marker);
  var address='<%=Address%>';
  GEvent.addListener(marker, "mouseover", function() {
  marker.openInfoWindowHtml(address);
  });

  //Adding "scaling and repositioning toolbar"
  map.addControl(new GMapTypeControl());
  map.addControl(new GLargeMapControl());


}
}//end function load()
    </script>

</head>
<body onload="load()" onunload="GUnload()">
    <form id="form1" runat="server">
        <center>
            <div id="map" style="height: 500px; width: 800px;" align="center">
            </div>
        </center>
    </form>
</body>
</html>

Discussions

Need to discuss about this article ? Click here