by Admin
2. July 2009 05:19
Download Sample Project
While working on a car dealership listings web site, I was experimenting with inserting google maps
into the data grid. The grid will show name and address of top rated car dealers in certain
categories. And along side their information, it will show their location on google map. To accomplish
this task, I needed the longitude and latitude of car dealership's address or location. Some time back in
my earlier post
Convert Address and/or IP address to Geo Location I described how you can utilize google
map's api to convert a physical address to geo location coordinates. This is the same technique that I used in
Backyardtweets to show tweets in a specified
location. So use the google map api to get these coordinates and insert these coordinates in the
java script.
Now that you have geo location corresponding to an address, your task is to insert that little piece of
java script in each row of the data grid. The way google map java script works is that it requires
a HTML element where it can insert the map image. So I inserted a div with unique id in a cell in
each row and then passed that unique id to java script that is used to render the map. Add an event
handler for RowDataBound event and there you can add the element and register a
client script for map as well. Here is some code snippet that shows how this all is accomplished.
protected void OnDealerRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
var carDealer = e.Row.DataItem as CarDealer;
var divId = string.Format("dealloc_{0}", carDealer.Id);
var mapPanel = e.Row.Cells[2].FindControl("mapPanel") as Panel;
var div = new HtmlGenericControl("div");
div.Attributes.Add("id", divId);
div.Attributes.Add("class", "mapdiv");
mapPanel.Controls.Add(div);
string js = GetGoogleMapScript(carDealer, divId);
ScriptManager.RegisterStartupScript
(this.Page, this.GetType(), "_map_" + carDealer.Id, js, true);
}
}
private string GetGoogleMapScript(CarDealer dealer, string ctlId)
{
string loc = string.Empty;
if (!string.IsNullOrEmpty(dealer.State))
{
loc = string.Format("{0},", dealer.State);
}
loc += dealer.Country;
decimal longitude, latitude;
GoogleMapUtility.GetGeoLocationFromGoogle(loc, out longitude, out latitude);
dealer.Location.Latitude = latitude;
dealer.Location.Longitude = longitude;
return GetJScriptForGeoLocations(longitude, latitude, ctlId);
}
public static string GetJScriptForGeoLocations(decimal longitude, decimal latitude, string elemId)
{
StringBuilder sb = new StringBuilder();
sb.Append("function initialize_" + elemId + "() {{");
sb.Append(" if (GBrowserIsCompatible()) {{ ");
sb.Append(" var map = new GMap2(document.getElementById(\"{0}\"));");
sb.Append(" map.setCenter(new GLatLng({1}, {2}), 13);");
sb.Append(" map.setUIToDefault();}}}} initialize_" + elemId + "();");
return string.Format(sb.ToString(), elemId, latitude, longitude);
}
The attached project with this post has all the implementation for this sample implementation. And this is
a Visual Studio 2010 project. I have not used any 2010 specific namespaces or code in this implementation so
you should be able to take all the code and move it into a VS2008 or VS2005 project. And you will need to
get key for google map api use from google as well.
Feel free to drop us a line if you have something in mind that you would like us to prototype
and write about it.
Subscribe