Google Maps Control for ASP.Net - Part 2 (转载)
Posted on 2010-05-25 09:35 Happy Coding 阅读(626) 评论(0) 编辑 收藏 举报Free Open source Control
Introduction
This is second part in two part series of my article Google Maps User Control for ASP.Net. In 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 source code of this user control so that you can modify it for your own use.
Diagram
Diagram above shows working flow of this user control. I will explain you one by one each element in this diagram.
ASPX page with Google Map User Control
- As I mentioned in part 1, we need to initialize few properties ofthis user control to make it work. These properties are initialized inPage_Load() event of ASPX page.
- When you initialize these properties, they gets stored inGOOGLE_MAP_OBJECT session variable. Later on this session variable isaccessed by GService.asmx web service to draw google map.
- Go to source of GoogleMapForASPNet.aspx.cs file. Check Page_Load() method.
As you can see, I am storing GoogleMapObject property in a sessionvariable if this is a first time load of page. If this is a post backthen I use existing session variable value and assign it toGoogleMapObject property.
User Control (GoogleMapForASPNet.ascx)
- GoogleMapForASPNet.ascx file contains a <DIV> element withID=GoogleMap_Div. Google map is drawn on this <DIV> element
- GoogleMapForASPNet.ascx is responsible for calling DrawGoogleMap()javascript function on page load. If you see source ofGoogleMapForASPNet.ascx.cs file, it contains following lines inPage_Load() event.
This causes DrawGoogleMap() function to get fired.
GoogleMapAPIWrapper.js
- This javascript acts as a wrapper between ASP.Net calls and Google Maps Core API functions.
- When DrawGoogleMap() function is called, it calls web service method GService.GetGoogleObject() to get session variable values.
- Once different parameters are retrieved from session variable, itwill start calling Google Maps core API functions to draw a map.
Web Service (GService.asmx)
- As I have mentioned before, GService.GetGoogleObject() andGService.GetGoogleObjectOptimized() are functions defined inGService.asmx file.
- These functions retrieves Google Map parameters from session variable.
How to define a Web Service Method
- This control uses Web Service Methods to get values from a sessionvariable. These methods are defined in Gservice.cs(GService.asmx codebehind) file.
- Go to source of GService.cs file. Observe how GetGoogleObject() web method is defined.
Return value type from this method is GoogleObject.
How to call ASP.Net function (Web service method) from Javascript using a Web Service
- If you go to HTML source of GoogleMapForASPNet.ascx file, you will see that I am using <ScriptManagerProxy> control.
When <ServiceReference> is used with<ScriptManagerProxy> or <ScriptManager> controls, itallows you to use web service methods defined in code behind. - Go to source of GoogleMapAPIWrapper.js file. Observe how I am calling a web service method in DrawGoogleMap() function.
GService.GetGoogleObject() is a web service method.fGetGoogleObject() is a javascript function that should be called onceweb service method returns.
result is return value from web service method GService.GetGoogleObject(). Thus result is of type GoogleObject. You can access properties of result in javascript to get map parameters.
Difference between GetGoogleObject() and GetGoogleObjectOptimized()
- Both of these methods work in similar fashion. GetGoogleObject() iscalled when page loads for first time. It returns all of theGoogleObject properties to javascript function. WhileGetGoogleObjectOptimized is called on postback. It does not return allof the properties. Instead it returns minimum properties required tomake a change in existing map.
- If you view source of GoogleMapAPIWrapper.js file, there are two functions defined in it as below,
These function causes GService.GetOptimizedGoogleObject() to getfired when an AJAX call finishes. For example let's say you have abutton in an UpdatePanel. When you click it, it postbacks the page.When this postback completes, above function will get fire.
Functions defined in GoogleMapAPIWrapper.js
- To make this article short, I don't want to explain each and everyfunction defined in this file. Instead I will explain importantfunctions only. If you want more details for any code that's notexplained here, you can post your questions in Comments section..
-
This function creates a marker on Google Map. As you can see, I amadding two events with each marker. First one is click(). When a userclicks on marker, a balloon (info window) pops up. This is a javascriptevent. Second one is dragend(). If a user wants he can drag a pushpinto a new location. This will cause a web method GService.SetLatLon() toget executed. This method sets new latitude and longitude values inSession Variable. As you can see this function also calls RaiseEvent()function which causes an AJAX postback.function RaiseEvent(pEventName,pEventValue)
{
document.getElementById('').value = pEventName;
document.getElementById('').value = pEventValue;
__doPostBack('UpdatePanel1','');
}
When postback finishes, new latitude and longitude values will be picked up from Session Variable. -
function RecenterAndZoom(bRecenter,result)
This function causes Recentering of map. It finds all visiblemarkers on map and decides center point and zoom level based on thesemarkers. -
function CreatePolyline(points,color,width,isgeodesic)
This function creates polylines between given points. See Polylines property in GoogleObject class. -
function CreatePolygon(points,strokecolor,strokeweight,strokeopacity,fillcolor,fillopacity)
This function creates polygons between given points. See Polygons property in GoogleObject class.
How to define Icons for google map
- If you see implementation of fGetGoogleObject() andfGetGoogleObjectOptimized() javascript functions, you can see that I amcreating custom icons for 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.Following article explains you each of these properties in detail.
Making your own custom markers
Special Notes
I have published this article on www.codeproject.com as well. Here is the link to this article.
Google Maps Control for ASP.Net - Part 1
