Google Maps Control for ASP.NET - Part 2

Introduction

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.

Diagram

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 = 
                ConfigurationManager.AppSettings["GoogleAPIKey"]; 

    //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.
    GoogleMapForASPNet1.GoogleMapObject.Points.Add(
                            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;
    }
    else
    {
        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.

GoogleMapAPIWrapper.js

• 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 =  
        (GoogleObject)System.Web.HttpContext.Current.Session["GOOGLE_MAP_OBJECT"];

    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">
 <Services>
    <asp:ServiceReference Path="~/GService.asmx" />
  </Services>
</asp:ScriptManagerProxy>

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(fGetGoogleObject);
    }
}

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);
    
    if(result.ShowMapTypesControl)
    {
        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)
{
    GService.GetOptimizedGoogleObject(fGetGoogleObjectOptimized);
}
function pageLoad()
{
    if(!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack())
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}

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});
    if(InfoHTML!='')
    {
        GEvent.addListener(marker, "click", 
               function() { this.openInfoWindowHtml(InfoHTML); });
    }
    GEvent.addListener(marker, "dragend", function() {  
            GService.SetLatLon(this.value,this.getLatLng().y,this.getLatLng().x);
            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;
    __doPostBack('UpdatePanel1','');
}

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, 
                       strokeopacity,fillcolor,fillopacity)

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,
                                    result.Points[i].IconImageHeight);
myIcon_google.image = result.Points[i].IconImage;
myIcon_google.shadow = result.Points[i].IconShadowImage;
myIcon_google.shadowSize = new GSize(result.Points[i].IconShadowWidth, 
                                        result.Points[i].IconShadowHeight);
myIcon_google.iconAnchor =  new GPoint(result.Points[i].IconAnchor_posX, 
                                    result.Points[i].IconAnchor_posY);
myIcon_google.infoWindowAnchor = new GPoint(result.Points[i].InfoWindowAnchor_posX, 
                                result.Points[i].InfoWindowAnchor_posY);
.
.

• 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.

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 13 of 13 (Total in Forum: 13) (Refresh) FirstPrevNext

Directions Geoff King 11:34 10 Jul '09   Anyone tried to set up directions with this object? Sign In·View Thread·PermaLink Helpful mbaocha 17:42 4 May '09   This article was helpful. Thanks a lot.. Although I've not coded it yet but i'm delighted to know how much we can manipulate Google map with our programming knowledge. _________________________________________________ Digital Map Nigeria | Street Level Map of Lagos Abuja Nigeria | GIS company in Nigeria Sign In·View Thread·PermaLink Page Refresh MrDeee 2:22 8 Apr '09   Hi Shabdar, Thank you for this great control, i have a trouble when use this control at master page.. it's included at the ASPContent and all events make the whole page refresh.. I have modified the ScriptManager to ScriptManagerProxy as you mentioned before but nothing has changed.. Thank you, Sign In·View Thread·PermaLink Its a requirement ravi K Kashyap 19:02 14 Jan '09   hi, I have a requirement as: I want to add a Plane Map of India on a aspx Page. It should only show states boundaries. On clicking of a particular state it should shows some pushpins according to some logic. for eg: when page load it should show plan india map...on click of New Delhi it should zoom in to it and shows some pin point... please tell how can i achieve this.... thanks in advance... Ravi K Kashyap Sign In·View Thread·PermaLink 2.00/5 (1 vote) GService is 'undefined' in the Javascript file... nimarii 9:26 4 Dec '08   I've tried running this, but when I do so, I get the runtime error: GService is undefined function DrawGoogleMap() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("GoogleMap_Div")); geocoder = new GClientGeocoder(); GService.GetGoogleObject(fGetGoogleObject); } } I'm including the script reference to the GService.asmx page...what am I doing wrong? Sign In·View Thread·PermaLink 1.67/5 (3 votes) Re: GService is 'undefined' in the Javascript file... yarrapatni 13:03 9 Jan '09   I am also receiving the same error any clue ? Sign In·View Thread·PermaLink 1.50/5 (2 votes) Re: GService is 'undefined' in the Javascript file... Member 3598551 6:47 12 Oct '09   Hi, I have just tried this control out and got the same problem. The good news is I have fixed it. What I had to do, was to make sure the script path was correct below. In my case I put the control and GService inside a control folder, so I just changed the path and it worked fine. old <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="~/GService.asmx" /> </Services> </asp:ScriptManager> new <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="~/Controls/GService.asmx" /> </Services> </asp:ScriptManager> Sign In·View Thread·PermaLink Error Trapping Member 3978183 10:01 16 Sep '08   Hello, Thanks very much for the Google Maps control. One problem is that when the internet connection is poor then the JavaScript will fail at if(GBrowserIsCompatible()) { ........... } This I can arrest in a try..catch block. But the containing page will now have a sort of "null map". How can I trap this in the C# codebehind so that any further operations will bail out to an error page. Sorry I'm very much a novice at JavaScript. Best Regards Bob Sign In·View Thread·PermaLink problem with the control yakida 3:34 10 Jun '08   Hi, Nice explaining.I am new in ASP.NET.In the beging in the explaing you say the you have had problem with the some database.I create classes and store the ID and coordinaties of the points.When I drag them the change is stored in the tables.But sometimes(50%) after some moves of the points,when I drag one point to oder position the draged befored go to its old plase.And the most strange that the coordinates of the draged before point don't change in the table,only the coordinates of the point that i am moving now.And the changes of the point i am moving are stored in the table. I have one more problem.I have button,which delete "clicked" point.The event of the button is: protected void btnRemove_Click(object sender, EventArgs e) { if (ViewState["clicked"] == null) return; BusinessEntityBase entity = new BusinessEntityBase(DBS.T_COORDINATES); DataRow dr = entity.LoadRow( ViewState["clicked"]); if (dr != null) { entity.DeleteRow(dr); entity.Apply(); Bind(); ViewState["clicked"] = null; } } But if I had only clicked over the point ViewState["Clicked"] remains null,but when move the point and then clicked over it the ViewState["Clicked"] is not null and the everything is ok. Thanks for time to read my questions. Sign In·View Thread·PermaLink 5.00/5 (1 vote) Draggable icons not working for me GeertVeenstra 7:01 8 Jun '08   Hi Shabdar, Thanks for the nice control ! I'm having a problem with draggable icons. Internet Explorer is giving a javascript error : 'document.getElementById(...) is empty or is no object' I traced it back to the RaiseEvent function in GoogleMapAPIWrapper.js. I also tried your MapWithDraggableIcons.aspx sample page, but it is not working there either. Any idea ? Regards, Geert Veenstra Sign In·View Thread·PermaLink 1.00/5 (1 vote) Re: Draggable icons not working for me yakida 3:00 10 Jun '08   Hi, I have the same problem and i can't fix it.Can you tell if fix this problem? Sign In·View Thread·PermaLink Re: Draggable icons not working for me Shabdar Ghata 9:35 13 Jun '08   This issue has been resolved. Get latest version from my blog www.shabdar.org Shabdar Sign In·View Thread·PermaLink 1.00/5 (1 vote) Nice explain sonj 22:04 4 Jun '08   Hi. The way of explain is excellent. I'm cross posting the question don't mind. I developed a window based application with functionalities to create kml files. I have to overlay this kml file in my another window. Could you please guide me if possible with code snippet. Thnx - sonj Sign In·View Thread·PermaLink 3.17/5 (4 votes)

Last Visit: 11:05 8 Nov '09     Last Update: 11:05 8 Nov '09 1