How to insert google map in each row of DataGrid

by Admin 2. July 2009 05:19

Download Sample Project

google map in grid

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.

Views: 18027

Tags: , ,

ASP.Net | GridView

Comments

7/2/2009 6:45:25 AM #

trackback

How to insert google map in each row of DataGrid

You've been kicked (a good thing) - Trackback from DotNetKicks.com

DotNetKicks.com

11/18/2009 2:22:59 AM #

replica watches

Hi,I find you website through google,I was deeply interested by your post,Thanks for your great work.

replica watches

11/25/2009 6:27:00 AM #

cash loans

Interesting post

cash loans United States

11/28/2009 5:20:06 AM #

jeux de blackjack en ligne gratuits

.NET now works with most commercial and open source databases such as MySQL, SQL Server, VistaDB and many others. This allow you to use practically any database supported by your hosting provider. You can still use XML files if you don't want to use a database.

jeux de blackjack en ligne gratuits India

12/5/2009 6:09:33 AM #

fast payday loans

Nice resource. rss feed added

fast payday loans United States

12/6/2009 5:44:23 PM #

payday loans

Just try to smile for about 2-3 mins then you can get back to work

payday loans United States

12/9/2009 3:14:08 AM #

Cheap new cars

We can now find you the best deals for the new car you are looking for by searching across our panel of manufacturer dealers across the whole of the UK.

Cheap new cars United States

12/21/2009 7:43:33 AM #

Louisiana Payday Loans

Interesting post

Louisiana Payday Loans United States

12/30/2009 9:57:05 AM #

loans

I always wanted to write in my site something like that but I guess you'r faster :)

loans United States

1/2/2010 4:05:35 AM #

online payday loans

Interesting post

online payday loans United States

1/6/2010 11:54:31 PM #

wii Bundles In Stock

Happy to see your blog as it is just what I’ve looking for and excited to read all the posts.I am looking forward to another great articles from you

wii Bundles In Stock United States

1/7/2010 1:01:03 AM #

HP Quick Test Professional

I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commentators here!

HP Quick Test Professional United States

1/10/2010 11:16:14 PM #

SEO Services

This article simply ROCKS ! That was a great read for me. keep it up with all the good work..

http://www.clickresponse.net/

SEO Services United States

1/12/2010 3:21:55 AM #

Web designing company india

That is some inspirational stuff. Thanks a lot for sharing with us

Web designing company india United States

1/18/2010 1:48:23 PM #

payday loans

You cannot plough a field by turning it over in your mind.

payday loans United States

1/19/2010 6:27:36 AM #

Website SEO

Good post….thanks for sharing.. very useful for me i will bookmark this for my future needed. thanks for a great source.

Website SEO United States

1/22/2010 12:33:54 AM #

American online gambling site

If anything about current interaction design can be to called “glamorous,” it’s creating Web applications. After all the, when was last time you heard someone rave about the interaction design of a product that wasn’t on the Web? (Okay, besides the iPod.) All the cool, innovative new projects are online

American online gambling site United States

Powered by BlogEngine.NET 1.5.1.7
Theme by Naveen Kohli