Click here to Skip to main content
14,925,639 members
Articles / Web Development / ASP.NET
Posted 4 May 2009


177 bookmarked

Show Your Data on Google Map using C# and JavaScript

Rate me:
Please Sign up or sign in to vote.
4.75/5 (51 votes)
4 May 2009CPOL5 min read
Show your data on Google map using C# and JavaScript


Almost every one of us who uses internet has seen the Google map, Google earth and Google street view, etc. The good thing is that Google also shares its products in a manner such that you can customize them according to your needs. In this article, I am going to share a simple technique to show your data on Google map.


Previously, I wrote an article on how to count the visits and visitors on your website and save the data in a table including the IPs of the visitors. Then one day I visited a site that was offering to show similar data on Google map. I started to discover how I can do that if I have a database of IPs. I found that Google shares some Maps APIs that offer a lot of functionalities including placing a marker on the map if you can provide its coordinates, meaning the latitude and longitude of that point on the earth.


Now the only problem was that I had to translate the IP into its corresponding coordinates. I searched again and found some web services on the internet that can return the coordinates of an IP. That’s all I needed to know to achieve the goal and now it was just a matter of implementation.

How To Do That... Using the Code

Assuming that you have a table in a database that has two columns for earth coordinates you want to plot on Google map as shown below:


If you have a table that has IPs as in my previous article, you can add two new columns in that table, and then use some web services to update the table for coordinates manually or you can write a small program to call such a web service to update your database automatically. Or may be you want to show your shipments destinations on the map, or you might be interested in showing the location of showrooms of your products around the world and you have a similar data for that. Possibilities are endless.

Now how to plot this data on Google map? Google provides some API methods that you can call in JavaScript from your website and supply the coordinates to place a marker on the map. First you need to add the API's reference in your HTML in header tag as:

<script src=";v=2&amp;
	sensor=false&amp;key=abcdefg" type="text/javascript"></script> 

Note: You need to obtain a unique key for your site from Google before publishing your site. For test purposes on localhost you can use the above code as is.

Second, you have to place a div element in the page where you want to show the Google map, set its size, etc. according to your layout needs.

<div id="map_canvas" style="width: 100%; height: 728px; margin-bottom: 2px;">

Third, you can create a Google map object by passing it div element where you want to show the map.

var map = new GMap2(document.getElementById('map_canvas'));

Also you need to tell what location on the map should be in the center of map, first you get the point from Longitude and Latitude values. For example, if you want to see London in the center of the map, you can use method as:


Now you can pass this point to setCenter method with zoom level of your map ranges from 1-20. I am using level 2 to see the whole world in my map, increasing this number will zoom the map to your center location.

map.setCenter(new GLatLng(51.5,-0.1167), 2);

Then you can specify a location on the map for Google to place a marker at that location by calling addOverlay method with GMarker object as argument that takes the actual coordinates of the location. For example to place a marker on Toronto, you can write the following line in the script.

map.addOverlay(new GMarker(new GLatLng(43.6667,-79.4168)));

You can specify as many markers as you want. Now you are ready to see the map. Put them all together in a JavaScript function and call it onload event of the page. The complete script will be something like:

<script type='text/javascript'>  
function initialize() {  
    if (GBrowserIsCompatible()) {  
        var map = new  Map2(document.getElementById('map_canvas'));      
        map.setCenter(new GLatLng(51.5,-0.1167), 2);       
        map.addOverlay(new  Marker(new GLatLng(43.6667,-79.4168)));      
}   } </script> 

But wait a minute.. JavaScript! Isn’t it client side programming?... Then how can you pass the data to Google API from a database on your server? Right, this is the problem that you have to deal with. You need to use a combination of JavaScript and any server side scripting, e.g. ASP.NET C#, VB, PHP or CGI whichever suits your environment. I used C# and JavaScript to complete this.

You have to generate the JavaScript on the server for Google APIs and render it on the client by using an “asp:Literal” control . You also need to place a Div control on the page in which Google APIs can render a customized map in the browser and add reference to Google APIs script. So you only need two controls on your page a Literal and a Div. The complete HTML is shown below including Google API references for MAP.

<html xmlns="">
<head id="Head1" runat="server">
   <title>Your Data on Google Map </title>
     <%--Google API reference--%>
     <script src=" file=api&amp;
	v=2&amp;sensor=false&amp;key=abcdefg" type="text/javascript">
</head><body onload="initialize()" onunload="GUnload()">
  <form id="form1" runat="server">
       <asp:Panel ID="Panel1" runat="server">
           <%--Place holder to fill with javascript by server side code--%>
           <asp:Literal ID="js" runat="server"></asp:Literal>
           <%--Place for google to show your MAP--%>
           <div id="map_canvas" style="width: 100%; height: 728px; 
		margin-bottom: 2px;">

Now how to create the script on the server that can show all of your markers on the map? Here is a method to do that. You need to pass it the table discussed above that has Longitude and Latitude values in two columns, for the points you want to mark on MAP and this method will generate the complete script with all map markers in the Literal control on the page.

private void BuildScript(DataTable tbl)
   String Locations = "";
   foreach (DataRow r in tbl.Rows)
      // bypass empty rows 
       if (r["Latitude"].ToString().Trim().Length == 0)

         string Latitude = r["Latitude"].ToString();
         string Longitude = r["Longitude"].ToString();

      // create a line of JavaScript for marker on map for this record 
       Locations += Environment.NewLine + " map.addOverlay
		(new GMarker(new GLatLng(" + Latitude + "," + Longitude + ")));";

  // construct the final script
  js.Text = @"<script type='text/javascript'>
                  function initialize() {
                  if (GBrowserIsCompatible()) {
                     var map = new GMap2(document.getElementById('map_canvas'));
                    map.setCenter(new GLatLng(51.5,-0.1167), 2); 
                   " + Locations + @"
         </script> ";

One you call this method in the *.cs file of your ASP form, it will create a complete JavaScript for Google to create a map and marker on your page.

Click here to see a live demo of this article. That site shows a marker on the map for each location from where any of my sites has been visited. If you have visited any of my sites, you should see a marker on your city on the map. Here is a snap of that demo site.


For more details and usage of this article, you can visit my blog page about this article.

I have created a sample project for this article that you can download. It also has a sample access database in it. You can simply run this project in Microsoft Visual Studio 2008 without changing anything.

You can visit Google page about Maps APIs for more details about using and customizing Google Maps.


  • 4th May, 2009: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Ghaffar Khan
Software Developer (Senior)
Pakistan Pakistan
I have been in the field of computer and IT for last eight years, after doing Masters in Computer Science from Karachi University.

My programing experience includes C/C++, C#, ASP.NET, PHP, Assembly Language, VC++, OpenGL, VB, FoxPro.

My Home City is Karachi. I love to see new places and never miss a chance to go out of the city whenever I get enough time.

Comments and Discussions

Questionjs.Text is not declared anywhere Pin
Never Hurt Others15-May-16 8:31
MemberNever Hurt Others15-May-16 8:31 
AnswerRe: js.Text is not declared anywhere Pin
renobizarro13-Jun-16 8:42
Memberrenobizarro13-Jun-16 8:42 
GeneralThank you Pin
m.eftekhari13-Oct-15 0:29
Memberm.eftekhari13-Oct-15 0:29 
Questiontoo much recursion Pin
Member 1118173816-Jan-15 7:42
MemberMember 1118173816-Jan-15 7:42 
GeneralMy vote of 5 Pin
NF Khan19-Dec-14 6:00
MemberNF Khan19-Dec-14 6:00 
GeneralMy vote of 1 Pin
sumitrawat2227-Nov-14 19:37
Membersumitrawat2227-Nov-14 19:37 
GeneralBug Pin
sajawal1-Jul-14 18:32
Membersajawal1-Jul-14 18:32 
GeneralRe: Bug Pin
Member 1118173816-Jan-15 7:43
MemberMember 1118173816-Jan-15 7:43 
QuestionDraw Route between those locations loaded from SQL database. Pin
Niraj Rajpurohit18-Mar-14 23:38
MemberNiraj Rajpurohit18-Mar-14 23:38 
Questionmap disappear Pin
Member 105045625-Jan-14 5:30
MemberMember 105045625-Jan-14 5:30 
AnswerRe: map disappear Pin
Mick Conroy25-Jul-14 15:51
MemberMick Conroy25-Jul-14 15:51 
GeneralRe: map disappear Pin
Naresnkumar7-Jun-15 20:54
MemberNaresnkumar7-Jun-15 20:54 
QuestionAdd locations from a Database using C #; no JavaScript Pin
Member 82081704-Jan-14 6:54
MemberMember 82081704-Jan-14 6:54 
QuestionC# question Pin
Member 1027138314-Sep-13 20:33
MemberMember 1027138314-Sep-13 20:33 
Questionplot data on offline maps Pin
Member 1027138314-Sep-13 20:30
MemberMember 1027138314-Sep-13 20:30 
GeneralMy vote of 4 Pin
VassilisZenelis20-Nov-12 21:16
MemberVassilisZenelis20-Nov-12 21:16 
QuestionGoogle Map Bind with sql server database. Pin
MudasirAbbasi16-Nov-12 23:53
MemberMudasirAbbasi16-Nov-12 23:53 
Answerneed help on interactive metro rail map Pin
dishantmudgal24-Feb-13 20:11
Memberdishantmudgal24-Feb-13 20:11 
GeneralMy vote of 5 Pin
opik0745-Nov-12 16:58
Memberopik0745-Nov-12 16:58 
QuestionV3 Pin
Arief Aditya27-May-12 16:38
MemberArief Aditya27-May-12 16:38 
QuestionHow to update map by adding markers in runtime Pin
allankianand29-Apr-12 19:24
Memberallankianand29-Apr-12 19:24 
Questionclick to show point name Pin
lionpag812-Nov-11 16:30
Memberlionpag812-Nov-11 16:30 
QuestionHow can I show point names - Emergency Pin
senarath.isuru23-Sep-11 2:45
Membersenarath.isuru23-Sep-11 2:45 
QuestionGet data from SQL Server database Pin
artov5-Sep-11 3:04
Memberartov5-Sep-11 3:04 
GeneralASCX Control <body onload="initialize()" onunload="GUnload()"> Pin
macupryk11-Jul-11 9:56
Membermacupryk11-Jul-11 9:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.