Click here to Skip to main content
14,303,528 members

Google Maps Control for ASP.NET - Part 2

Rate this:
4.56 (17 votes)
Please Sign up or sign in to vote.
4.56 (17 votes)
4 Jun 2008GPL3
Discusses the source of this User Control.

Image 1


This is the second part in a two part series of my article, Google Maps User Control for ASP.NET. In the first part, Google Maps Control for ASP.NET - Part 1, I have explained how to use this control in your ASP.NET application. In this part, I am going to explain the source code of this user control so that you can modify it for your own use.


Image 2

The diagram above shows the working flow of this user control. I will explain to you one by one each element in this diagram.

ASPX page with the Google Map User Control

  • As I mentioned in part 1, we need to initialize a few properties of this user control to make it work. These properties are initialized in the Page_Load() event of the ASPX page.
  • protected void Page_Load(object sender, EventArgs e)
        //Specify API key
        GoogleMapForASPNet1.GoogleMapObject.APIKey = 
        //Specify width and height for map.
        GoogleMapForASPNet1.GoogleMapObject.Width = "800px"; 
        // You can also specify percentage(e.g. 80%) here
        GoogleMapForASPNet1.GoogleMapObject.Height = "600px";
        //Specify initial Zoom level.
        GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;
        //Specify Center Point for map. 
        GoogleMapForASPNet1.GoogleMapObject.CenterPoint = 
                        new GooglePoint("1", 43.66619, -79.44268);
        //Add pushpins for map.
        //This should be done with intialization of GooglePoint class.
        //In constructor of GooglePoint, First argument is ID of this pushpin. 
        //It must be unique for each pin. Type is string.
        //Second and third arguments are latitude and longitude.
                                new GooglePoint("1", 43.65669, -79.45278));
  • When you initialize these properties, they gets stored in the GOOGLE_MAP_OBJECT session variable. Later on, this session variable is accessed by the GService.asmx web service to draw the Google map.
  • Go to the GoogleMapForASPNet.aspx.cs file. Check the Page_Load() method.
  • protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            Session["GOOGLE_MAP_OBJECT"] = GoogleMapObject;
            GoogleMapObject = (GoogleObject)Session["GOOGLE_MAP_OBJECT"];

    As you can see, I am storing the GoogleMapObject property in a session variable if this is the first time load of the page. If this is a post back, then I use the existing session variable value and assign it to the GoogleMapObject property.

User Control (GoogleMapForASPNet.ascx)

  • The GoogleMapForASPNet.ascx file contains a <DIV> element with ID=GoogleMap_Div. The Google map is drawn on this <DIV> element
  • GoogleMapForASPNet.ascx is responsible for calling the DrawGoogleMap() JavaScript function on page load. If you look in the GoogleMapForASPNet.ascx.cs file, it contains the following lines in the Page_Load() event:
  • Page.ClientScript.RegisterStartupScript(Page.GetType(), 
       "onLoadCall", "<script language="'javascript'"> " + 
       "if (window.DrawGoogleMap) { DrawGoogleMap(); } </script>");

    This causes the DrawGoogleMap() function to get fired.


  • This JavaScript acts as a wrapper between the ASP.NET calls and the Google Maps Core API functions.
  • When the DrawGoogleMap() function is called, it calls the web service method GService.GetGoogleObject() to get the session variable values.
  • Once different parameters are retrieved from the session variable, it will start calling the Google Maps core API functions to draw a map.

Web Service (GService.asmx)

  • As I have mentioned before, GService.GetGoogleObject() and GService.GetGoogleObjectOptimized() are the functions defined in the GService.asmx file.
  • These functions retrieve Google Map parameters from the session variable.

How to define a Web Service method

  • This control uses Web Service methods to get values from a session variable. These methods are defined in the Gservice.cs (GService.asmx code-behind) file.
  • Go to the GService.cs file. Observe how the GetGoogleObject() web method is defined.
  • [WebMethod(EnableSession = true)]
    public GoogleObject GetGoogleObject()
        GoogleObject objGoogle =  
        System.Web.HttpContext.Current.Session["GOOGLE_MAP_OBJECT_OLD"] = 
                                                          new GoogleObject(objGoogle);
        return objGoogle;

    Return the value type from this method as GoogleObject.

How to call an ASP.NET function (Web Service method) from JavaScript using a Web Service

  • If you go to the HTML source of the GoogleMapForASPNet.ascx file, you will see that I am using a <ScriptManagerProxy> control.
  • <asp:ScriptManagerProxy ID="ScriptManager1" runat="server">
        <asp:ServiceReference Path="~/GService.asmx" />

    When <ServiceReference> is used with <ScriptManagerProxy> or <ScriptManager> controls, it allows you to use Web Service methods defined in the code-behind.

  • Go to the GoogleMapAPIWrapper.js file. Observe how I am calling a Web Service method in the DrawGoogleMap() function.
  • function DrawGoogleMap()
        if (GBrowserIsCompatible())
          map = new GMap2(document.getElementById("GoogleMap_Div"));
          geocoder = new GClientGeocoder();

    GService.GetGoogleObject() is a web service method. fGetGoogleObject() is a javascript function that should be called once web service method returns.

    function fGetGoogleObject(result, userContext)
        map.setCenter(new GLatLng(result.CenterPoint.Latitude, 
                      result.CenterPoint.Longitude), result.ZoomLevel);
            map.addControl(new GMapTypeControl());

    The result is the return value from the Web Service method GService.GetGoogleObject(). Thus, result is of type GoogleObject. You can access the properties of result in JavaScript to get the map parameters.

Difference between GetGoogleObject() and GetGoogleObjectOptimized()

  • Both of these methods work in a similar fashion. GetGoogleObject() is called when the page loads for the first time. It returns all of the GoogleObject properties to the JavaScript function. GetGoogleObjectOptimized is called on postback. It does not return all of the properties. Instead, it returns the minimum properties required to make a change in the existing map.
  • If you view the GoogleMapAPIWrapper.js file, there are two functions defined in it as shown below:
  • function endRequestHandler(sender, args)
    function pageLoad()

    These functions cause the GService.GetOptimizedGoogleObject() to get fired when an AJAX call finishes. For example, let's say you have a button in an UpdatePanel. When you click it, it postbacks the page. When this postback completes, the above function will get fired.

Functions defined in GoogleMapAPIWrapper.js

To make this article short, I don't want to explain each and every function defined in this file. Instead, I will explain the important functions only. If you want more details of any code that's not explained here, you can post your questions in the Comments section..

function CreateMarker(point,icon1,InfoHTML,bDraggable,sTitle)
    var marker;
    marker = new GMarker(point,{icon:icon1,draggable:bDraggable,title: sTitle});
        GEvent.addListener(marker, "click", 
               function() { this.openInfoWindowHtml(InfoHTML); });
    GEvent.addListener(marker, "dragend", function() {  
            RaiseEvent('PushpinMoved',this.value);  });
    return marker;

This function creates a marker on the Google map. As you can see, I am adding two events with each marker. The first one is click(). When a user clicks on a marker, a balloon (info window) pops up. This is a JavaScript event. The second one is dragend(). If a user wants, he can drag a pushpin to a new location. This will cause a web method GService.SetLatLon() to get executed. This method sets the new latitude and longitude values in the Session variable. As you can see, this function also calls the RaiseEvent() function which causes an AJAX postback.

function RaiseEvent(pEventName,pEventValue)
    document.getElementById('<%=hidEventName.ClientID %>').value = pEventName;
    document.getElementById('<%=hidEventValue.ClientID %>').value = pEventValue;

When the postback finishes, the new latitude and longitude values will be picked up from the Session variable.

function RecenterAndZoom(bRecenter,result)

This function causes re-centering of the map. It finds all the visible markers on the map and decides the center point and the zoom level based on these markers.

function CreatePolyline(points,color,width,isgeodesic)

This function creates polylines between the given points. See the Polylines property in the GoogleObject class.

function CreatePolygon(points,strokecolor,strokeweight, 

This function creates polygons between the given points. See the Polygons property in the GoogleObject class.

How to define icons for the Google map

  • If you see the implementation of the fGetGoogleObject() and fGetGoogleObjectOptimized() JavaScript functions, you can see that I am creating custom icons for the Google map. This is how they are defined:
  • .
    myIcon_google = new GIcon(G_DEFAULT_ICON);
    markerOptions = { icon:myIcon_google };
    myIcon_google.iconSize = new GSize(result.Points[i].IconImageWidth,
    myIcon_google.image = result.Points[i].IconImage;
    myIcon_google.shadow = result.Points[i].IconShadowImage;
    myIcon_google.shadowSize = new GSize(result.Points[i].IconShadowWidth, 
    myIcon_google.iconAnchor =  new GPoint(result.Points[i].IconAnchor_posX, 
    myIcon_google.infoWindowAnchor = new GPoint(result.Points[i].InfoWindowAnchor_posX, 
  • There are various properties that you can set for a custom icon. The following article explains each of these properties in detail: Making your own custom markers.

Special notes

I have published this article on my blog as well. Here is the link to the article: Google Maps Control for ASP.NET - Part 2.


This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


About the Author

Shabdar Ghata
Web Developer
Canada Canada
Software Developer

Comments and Discussions

Questionproblem using GoogleMapForASPNet control in a webform solution Pin
Member 110082596-Feb-15 4:42
memberMember 110082596-Feb-15 4:42 
AnswerRe: problem using GoogleMapForASPNet control in a webform solution Pin
Member 1100825925-Feb-15 8:40
memberMember 1100825925-Feb-15 8:40 
QuestionGoogle Maps - Part 2 Code link and Blog link is broken. Pin
TomLeonard10-Dec-14 7:00
memberTomLeonard10-Dec-14 7:00 
QuestionProblem when Publish on Virtual Server Pin
pablodecker16-Sep-14 2:13
memberpablodecker16-Sep-14 2:13 
QuestionPolyline Click Event Pin
huynhle300526-Jun-14 4:41
memberhuynhle300526-Jun-14 4:41 
GeneralThe map shows a very shortly-gray scale refresh into the EEUU map Pin
Lechu8110-Feb-14 8:28
memberLechu8110-Feb-14 8:28 
QuestionHow to click on the mao and get a pin? Pin
Member 975229113-Jan-13 4:41
memberMember 975229113-Jan-13 4:41 
QuestionGoogle Map Control Pin
Naresh Mittal29-Oct-12 11:32
memberNaresh Mittal29-Oct-12 11:32 
Questionlabeled markers Pin
Salahov1-Sep-12 12:35
memberSalahov1-Sep-12 12:35 
QuestionShow information popup of marker on click of button out side the map Pin
Netweb23-Aug-12 1:59
memberNetweb23-Aug-12 1:59 
QuestionMap service Pin
Suraj S Koneri12-Apr-12 20:10
memberSuraj S Koneri12-Apr-12 20:10 
QuestionZoomLevel still not responsive Pin
rowek5-Apr-12 3:17
memberrowek5-Apr-12 3:17 
QuestionpageLoad() gives errors every time page changes at 'PageRequestManager' Pin
Dannoman12341-Feb-12 8:26
memberDannoman12341-Feb-12 8:26 
GeneralGoogle Map Control Pin
mydream201925-Nov-11 1:40
membermydream201925-Nov-11 1:40 
GeneralRe: Google Map Control Pin
Shabdar Ghata28-Nov-11 16:19
memberShabdar Ghata28-Nov-11 16:19 
GeneralRe: Google Map Control Pin
mydream201930-Nov-11 1:17
membermydream201930-Nov-11 1:17 
QuestionVery Good Article Pin
Anjum.Rizwi18-Jul-11 1:11
professionalAnjum.Rizwi18-Jul-11 1:11 
GeneralGet the Latitude,Longitude and the Zoomlevel when the AutomaticBoundaryAndZoom = true Pin
Maniaknl27-Oct-10 23:38
memberManiaknl27-Oct-10 23:38 
QuestionAlternate Address Pin
Igor_web8-Sep-10 3:44
memberIgor_web8-Sep-10 3:44 
GeneralUpdate Session Pin
LeilaGoharian13-Aug-10 0:04
memberLeilaGoharian13-Aug-10 0:04 
GeneralRe: Update Session Pin
Shabdar Ghata18-Aug-10 10:46
memberShabdar Ghata18-Aug-10 10:46 
GeneralPlease help me! I want to display multiple maps on one page and each map shows a device. Thanks much! Pin
philvaptech23-Jun-10 18:16
memberphilvaptech23-Jun-10 18:16 
GeneralHelp Pin
Arlen Navasartian19-Apr-10 14:32
memberArlen Navasartian19-Apr-10 14:32 
GeneralUrgent : How to use Client ID (Premier User of google map api) Pin
Bhavesh Mandaliya14-Dec-09 1:36
memberBhavesh Mandaliya14-Dec-09 1:36 
GeneralDirections Pin
Geoff King10-Jul-09 10:34
memberGeoff King10-Jul-09 10:34 

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.

Posted 4 Jun 2008


78 bookmarked