Google Maps Control for ASP.Net

Google Maps Control for ASP.Net - Part 2

Details: Category: ASP.Net; Published on Sunday, 17 April 2011 04:41; Written by Shabdar; Hits: 12911

Free Open source Control

Google Map Control for ASP.Net

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 of this user control to make it work. These properties are initialized in Page_Load() event of 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 GOOGLE_MAP_OBJECT session variable. Later on this session variable is accessed by GService.asmx web service to draw google map.

Go to source of GoogleMapForASPNet.aspx.cs file. Check 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 GoogleMapObject property in a session variable if this is a first time load of page. If this is a post back then I use existing session variable value and assign it to GoogleMapObject property.

User Control (GoogleMapForASPNet.ascx)

GoogleMapForASPNet.ascx file contains a &ltDIV> element with ID=GoogleMap_Div. Google map is drawn on this &ltDIV> element
GoogleMapForASPNet.ascx is responsible for calling DrawGoogleMap() javascript function on page load. If you see source of GoogleMapForASPNet.ascx.cs file, it contains following lines in Page_Load() event.
```
Page.ClientScript.RegisterStartupScript(Page.GetType(), "onLoadCall", " 
                                            if (window.DrawGoogleMap) { DrawGoogleMap(); } 
                                            ");
```
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, it will start calling Google Maps core API functions to draw a map.

Web Service (GService.asmx)

As I have mentioned before, GService.GetGoogleObject() and GService.GetGoogleObjectOptimized() are functions defined in GService.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 session variable. These methods are defined in Gservice.cs(GService.asmx code behind) file.

Go to source of GService.cs file. Observe how 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 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 &ltServiceReference> is used with &ltScriptManagerProxy> or &ltScriptManager> controls, it allows 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.

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

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() is called when page loads for first time. It returns all of the GoogleObject properties to javascript function. While GetGoogleObjectOptimized is called on postback. It does not return all of the properties. Instead it returns minimum properties required to make a change in existing map.
If you view source of GoogleMapAPIWrapper.js file, there are two functions defined in it as 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 function causes 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, above function will get fire.

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 important functions only. If you want more details for any code that's not explained here, you can post your questions in 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 Google Map. As you can see, I am adding two events with each marker. First one is click(). When a user clicks on marker, a balloon (info window) pops up. This is a javascript event. 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 new latitude and longitude values in Session 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 visible markers on map and decides center point and zoom level based on these markers.
```
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() and fGetGoogleObjectOptimized() javascript functions, you can see that I am creating 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

Comments/Questions

Thank you very much for this great web user control.

I have a one question here, how can i put some pins on client click. For example i want users to put only one pin on the map and there will be a save marker button when the user clicks on the button, the coordinates will be saved in database.

Thanks

=> Barbaros (Thursday 05-Jun-08 05:40 AM)

See my CreateMarker function. In this function I have defined a click event, which opens up a balloon. You need to add similar code for map click event. Somethink like this,

GEvent.addListener(map, 'click', function(overlay, latlng) {
var lat = latlng.lat();
var lon = latlng.lng();

Once you have lat/lon values, you can create marker based on these lat longs values

var point = new GLatLng(lat,lon);
map.addOverlay(new GMarker(point));

To save this new lat longs in database, you can define a webmethod and call it in javascript.

GService.SaveNewMarker(lat,lon);

=> Shabdar (Thursday 05-Jun-08 09:51 AM)

Can you provide a sample code to add a puspin when clicked on the map. i cannot invoke the createmarker code onclick of map

=> Prajith (Thursday 21-Aug-08 01:05 AM)

i did it like this in my way , can you suggest a better way, Untitled Page function display() { GEvent.addListener(map, "click", function(marker, latlng) { var inputForm3 = document.createElement("form"); inputForm3.setAttribute("action",""); inputForm3.onsubmit = function() { storeMarker(latlng); return false;}; var lng = latlng.lng(); var lat = latlng.lat(); inputForm3.innerHTML = '' + 'Add Transformer' + 'Transformer Name:' + '' + 'Transformer NO:' + '' + '' + '' + '' + ''; map.openInfoWindow (latlng,inputForm3); }); } Back Google map with draggable pushpins. Drag any pushpin and see changed latitude and longitude value at bottom of page. *=> prajith (Thursday 21-Aug-08 01:30 AM)*

First, Thanks for a Nice collection of code.
But, when I use "MapWithDraggableIcons" I gets a Error in the following function:
Is Says "document.getElementById('')" dont return a valid Object.

I look forward to hear from you.
Regads
Thomas.

function RaiseEvent(pEventName,pEventValue)
{
document.getElementById('').value = pEventName;
document.getElementById('').value = pEventValue;
__doPostBack('UpdatePanel1','');

=> Thomas Olsen (Sunday 08-Jun-08 05:51 AM)

Thank you for reporting this. This was a bug. I have fixed it. You can download source code again.

=> Shabdar (Monday 09-Jun-08 10:22 AM)

Shabdar, I see you already corrected it (I asked the same question on the codeproject site). I also found another solution. I see you moved the RaiseEvent function out of the GoogleMapAPIWrapper.js and into the GoogleMapForASPNET.ascx. To leave it in the .js file you can also do this: Add script section after UpdatePanel: var panelXXXYYY = ''; var hidEventName = ''; var hidEventValue = ''; Change RaiseEvent function in.js file to : function RaiseEvent(pEventName,pEventValue) { document.getElementById(hidEventName).value = pEventName;; document.getElementById(hidEventValue).value = pEventValue; if(document.getElementById(panelXXXYYY) != null) { __doPostBack(panelXXXYYY,''); } } Or something like this of course. Regards, Geert Veenstra *=> Geert Veenstra (Tuesday 10-Jun-08 04:57 PM)*

Hi Shabdar,

I upgraded to your new v1.5 control, so far it looks great.

In v.1.4 I had added G_PHYSICAL_MAP map type, enableDoubleClickZoom, and enableScrollWheelZoom, and all worked great. I moved my code changes over into the new GoogleMapAPIWrapper,js file (see below) but none of the functions work now. Any ideas?

Chris

// Add the Terrain map type
map.addMapType(G_PHYSICAL_MAP);

map.setMapType(eval(result.MapType));
// Add zoom via mouse double click
map.enableDoubleClickZoom();
// Add zoom via mouse scroll wheel
map.enableScrollWheelZoom();

=> Chris Mangiapane (Wednesday 11-Jun-08 12:14 AM)

Hi

I corrected my own question; For those that might like to use the G_PHYSICAL_MAP map type, enableDoubleClickZoom, and/or enableScrollWheelZoom, the code snippnet above needed to be moved from fGetGoogleObjectOptimized to the fGetGoogleObject method in the new GoogleMapAPIWrapper,js file.

Shabdar, you might like to consider adding this functionality to the next release.

Chris

=> Chris Mangiapane (Wednesday 11-Jun-08 10:16 AM)

Thanks, I will include this in next release. *=> Shabdar (Wednesday 11-Jun-08 11:57 AM)*

When I send parameters to a aspx file this mymap.aspx?id=2
I got a Decode error in s = System.Web.HttpContext.Current.Request.MapPath(PageName).Split(new char[] { '' }); Becayse Pagename include th "?id=2"
I have changed this to solv the problem in cGoogleMap.cs:
public static string GetLocalPath()
{
string[] s = System.Web.HttpContext.Current.Request.Url.AbsoluteUri.Split(new char[] { '/' });
string PageName = s[s.Length - 1];
int PageNameLength = PageName.IndexOf("?"); // New
if (PageNameLength != -1) // New
{ // New
PageName = PageName.Substring(0, PageNameLength);
} // New
s = System.Web.HttpContext.Current.Request.MapPath(PageName).Split(new char[] { '' });

string path = s[0] + "";
for (int i = 1; i < s.Length - 1; i++)
{
path = path + s[i] + "";
}

return path;

I hope you will aplly this to your code base !

=> Thomas Olsen (Wednesday 11-Jun-08 01:58 AM)

Thanks for this correction,

I will include this update in next release.

=> Shabdar (Wednesday 11-Jun-08 11:58 AM)

Hi Shabdar, It seems to me that the call to GetLocalPath (and also GetHttpURL) is not really necessary. I think this because in the IconImage set part you go through all this code, but at the end there is a line _icon = value; which makes all previous code unneeded ? Or is all that code there just to make sure (check) that the bitmap really exists ? Regards, Geert Veenstra *=> Geert Veenstra (Tuesday 24-Jun-08 11:31 AM)*

Is there a way to put a hyperlink inside the InfoHTML html text that contains javascript to fire a server-side event?

I one to add a 'Select' link in the InfoHTML. When clicked, it should fire a server-side event with that marker's information sent to the code-behind, so the server can change the marker icon and redraw the map.

Sure would appreciate a small example; I've been struggling with this one for days.

Chris

=> Chris Mangiapane (Saturday 14-Jun-08 08:36 PM)

Ok I answered part of my own question :) I added a 'Select' tag inside the InfoHTML. When clicked, it fires a server-side event and passes the marker's id. The server-side code records the selection and changes the marker icon color. BUT, the map does not redraw itself! How do I direct the map to redraw itself? The only work around I have found is to do a post-back --Response.Redirect("default.aspx") *=> Chris Mangiapane (Wednesday 25-Jun-08 11:00 AM)*

GetLocalPath() in cGoogleMap.cs doesn't handle URLs with query strings.

ex:
'locate_dealer.aspx?zipcode=02360' is not a valid virtual path.

I did a second split on the ? to fix it.

=> Steve (Monday 16-Jun-08 08:31 AM)

Hi Please see my reply => Thomas Olsen (Wednesday 11-Jun-08 01:58 AM) Regards Thomas Olsen. *=> Thomas Olsen (Tuesday 24-Jun-08 01:16 AM)*

Hey, this is very useful and i love that you can dynamically set the push pins by longitude and latitude, but is there a way of setting them by a postcode? Or is there a simple way of getting the longitude and latitude values from a postcode?

Help with this would be invaluable. Thanks Si!

=> Simon Caine (Sunday 22-Jun-08 09:57 PM)

Hi

In denmark we use "," as the default seperator, but the converter function use systemet setting, it must be hardcodet to use "." as Seperator.
I made a small addon to Code:
public static double GetNumericValue(object pNumValue)
{
if ((pNumValue == null))
{
return 0;
}
System.Globalization.NumberFormatInfo GoogleFormat = new System.Globalization.NumberFormatInfo(); // New
GoogleFormat.NumberDecimalSeparator = "."; // New
if (IsNumeric(pNumValue))
{
return double.Parse((pNumValue.ToString()), GoogleFormat); // Updated.
}
else
{
return 0;
}

I hope you will use this in next release, or make your own type of code ;)

=> Thomas Olsen (Monday 23-Jun-08 05:36 AM)

I was hoping you'd show how to read an SQL table and get the Lng/Lat data as pushpins into your maps... Thank you!

=> Brian (Tuesday 24-Jun-08 03:08 PM)

I think most of the people know how to read an sql table and load values in variable. If not, there are plenty of examples on net. I didn't want to make my sample to tightly bind with SQL Database. That's the reason I didn't include it in my samples as well. *=> Shabdar (Wednesday 25-Jun-08 09:12 AM)*


There's an automated SQL geocoder out there already. While it isn't open-source, I'm fairly certain that it is free. Link: http://sql.geocoder.jetkey.com/ *=> Mike (Monday 30-Jun-08 07:11 AM)*

Is it possible to hide the map control on the page and then show it on the click of a Button ?
This button would be in another UpdatePanel on the same Page.

I tried it, but ran into a problem where the UpdatePanelXXXYYY could not be found (I don't know the exact message right now) ?

Regards,

Geert Veenstra

=> Geert Veenstra (Wednesday 25-Jun-08 11:06 PM)

Hi Shabdar

Has anyone taken a look a the GStreetviewOverlay in order to provide a map 'street view'?

Here is a nice glimpse at what it can do:
http://googlemapsapi.blogspot.com/2008/03/street-view-in-api-or-how-i-spent-my.html

Any plans to add this in upcoming versions?

=> Chris Mangiapane (Wednesday 02-Jul-08 11:01 AM)

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 get highlighted and i want to show some further information pertaining to that state, which is stored in database. How can i do that in visual studio 2005.

=> Gaurav (Thursday 03-Jul-08 12:29 AM)

Is it possible to use the Google Maps Control in SQL Server Reporing services 2005?

I have stored the coordinates in the DB and to jump to an URL. The parameter ( coordinates, Text ) should be transferd over the Hyperlink Address.

Or is there an other way ?

=> Peda (Thursday 03-Jul-08 07:10 AM)

HI,

I downloaded your component, started up VS2008 after updating to 3.5 the application run quite well.

I then tried the setup steps outlined above to create a new project and on build received a message that I was missing a Script Manager. I added one and the result was a blank page.

Do you have any suggestions on how to get started so that the default map displays?

Thanks In Advance,
James

=> James Hein (Thursday 10-Jul-08 01:50 AM)

I solved the problem by also adding the GoogleMapApiWrapper.js file to my project. I have built Google Maps before inside plain HTMl but I am having problems making the transition to the ASP.NET version/implementation. Do you have any full examples of say how to implement a click to create a marker (I see the function in the included file) because I don't know how to 'wire' it all together in this environment. I am also interested in basic functionality like clicking a few points and creating a polygon / line from those clicked points for example. Thanks in advance James. *=> James Hein (Thursday 10-Jul-08 03:21 AM)*

Great article!I have to remember the latitude and longitude of the icons in sql table.I did it,but with one error,which come very rare.When I drag one icon everything is ok.But when I have two or more icons when i am dragging some of them the dragged before the last go to the "old" place and in the table the "old coordinates" are stored.But the last is stored with new coordinates.I can't understand why.

=> stefan (Friday 11-Jul-08 05:51 AM)

Hi again!I have another question.I make my error,but i have one question about the service.

public void SetLatLon(string pID, double pLatitude, double pLongitude)
{
GoogleObject objGoogleNew = (GoogleObject)System.Web.HttpContext.Current.Session["GOOGLE_MAP_OBJECT"];
GoogleObject objGoogleOld = (GoogleObject)System.Web.HttpContext.Current.Session["GOOGLE_MAP_OBJECT_OLD"];
objGoogleNew.Points[pID].Latitude = pLatitude;
objGoogleNew.Points[pID].Longitude = pLongitude;
//objGoogleOld.Points[pID].Latitude = pLatitude;
//objGoogleOld.Points[pID].Longitude = pLongitude;
}
I marked this two lines an everything is ok.What is the purpose of them.

I marked them because i think that the GetOptimizedGoogleObject() can't understand about the changet point location.

=> stefan (Friday 11-Jul-08 09:15 AM)

Is it possible to use this in a Web Application VS2005? I have spent quite a few hours trying. First I recieved the GService is undefined error and seam to have gotten past that by adding Inline scripts = true

But now I get Error: no element found
Source File: http://localhost/website/GService.asmx/GetGoogleObject
Line: 1

I see the div with the Google logo on the bootom but no map

Any ideas would be appreciated

=> Dave (Tuesday 15-Jul-08 07:46 PM)

I figured this out and it does work on a Web Application Project. First do not use InlineScript = "true" as shown above. The GService is undefined error was being caused by the fact I was doing a url rewrite for the pages in the global.asax Application_BeginRequest which was causing the errors with GService.asmx. By removing this for .asmx extentions everthing is working fine. if (Request.Path.IndexOf(".asmx") == -1) { // do page rewrite function } Hope this may help someone out as it took me quite some time to figure it out. Great control!!! Thanks, Dave *=> Dave (Wednesday 16-Jul-08 09:22 AM)*

Have you thought about incorporating this?

"If you have an existing Maps API site, you can 3D-enable your page with as little as one line of code."

=> Brian (Wednesday 16-Jul-08 09:36 AM)

I noticed the following behavior in your example "Google Map with Draggable pushpins"
when you zoom in and move the pushpin to a new location the map will zoom out to the original zoom level. Is there a way to keep it from doing that?
I have tried to set the zoomlevel (GoogleMapForASPNet1.GoogleMapObject.ZoomLevel) to different values in different places of the script
- load page area (doesnt seem to change the zoomlevel)
- in OnPushpinMoved

It seems that it still will go back to the original zoomlevel

Any suggestions how to fix this?

Thanks for a nice google map control

=> Islandhopper8 (Saturday 19-Jul-08 12:33 PM)

First you have to find the function RecenterAndZoom in the GoogleMapAPIWrapper.js file, then you have to comment the following lines: //var iZoomLevel = map.getBoundsZoomLevel(bounds); var point = bounds.getCenter(); // if(iZoomLevel>14) // { // iZoomLevel = 14; // } if(cnt<=0) { point = new GLatLng(result.CenterPoint.Latitude,result.CenterPoint.Longitude); // iZoomLevel =result.ZoomLevel; } // map.setZoom(iZoomLevel); map.setCenter(point); also check this in the function IgnoreZeroLatLongs at the beginning of the same file // var iZoomLevel = map.getBoundsZoomLevel(bounds); var point = bounds.getCenter(); // map.setZoom(iZoomLevel); map.setCenter(point); then try it *=> Gabriel Baldeon (Thursday 16-Oct-08 01:07 PM)*

Hi,
I am facing the problem to draw Poly line on the GMap. i.e I am able to draw up to 15 Lan&Lat values, if above I am not able to draw line dynamically.
Here I am retrieving the Lag & Lat values dynamically from Sql-Server.
Even here I am mentioning the error which I am getting….

Microsoft JScript runtime error: Sys.Net.WebServiceFailedException: The server method 'GetGoogleObject' failed with the following error: System.InvalidOperationException-- Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.

Thanks & Regards,
Hanu

=> Hanu (Monday 21-Jul-08 08:42 AM)

I am having the same problem. Was anyone able to resolve this? *=> Tejal Gandhi (Thursday 30-Oct-08 11:57 AM)*

Hi all!
I need help.I am not familiar with Javascript and want to ask something about Polylines.Can i create a InfoHTML for a polyline,when it is clicked or mouseover to show some info?
Thanks

=> stefoto (Monday 21-Jul-08 09:19 AM)

I just wanted to say that I enjoyed reviewing and using this control. I have successfully implemented it with minor changes. A previous post mentioned having to change the "GetLocalPath" function. However, it didn't work so I changed it to the following which fixed it.

public static string GetLocalPath()
{
string[] s = System.Web.HttpContext.Current.Request.Url.AbsoluteUri.Split(new char[] { '/' });
string PageName = s[s.Length - 1];
int PageNameLength = PageName.IndexOf("?");
if (PageNameLength != -1)
{
PageName = PageName.Substring(0, PageNameLength);
}
s = System.Web.HttpContext.Current.Request.MapPath(PageName).Split(new char[] { '//' }); //NEW because '' is not valid char

string path = s[0] + ""; //places proper backslashes
for (int i = 1; i < s.Length - 1; i++)
{
path = path + s[i] + ""; // new
}
return path;

=> brent (Monday 28-Jul-08 10:37 AM)

Do you do any custom development? I have a Google Maps project I would like to be completed.
Thanks,
Steve

=> Steve (Monday 04-Aug-08 10:45 AM)

Hi We do Google Map project, please provide me with your project details, we'll send you an offer. Please contact me at "tol (a-NoSpam) promobil.dk" Regards Thomas Olsen. *=> Thomas Olsen (Tuesday 05-Aug-08 01:58 AM)*

Hi;
Thanks for the great control. I wonder if i can get geocodes of any point i click on the map.

=> Burak (Friday 15-Aug-08 09:52 AM)

Hi Shabdar. Great google map control but there is a runtime error if i use this control with the browsers(IE,FF).
I downloaded the newest Version from here: downloads/GoogleMapControl.zip

If i click one time with the right mouse button on the map, this runtime error appears:
line: 784
Error: 'this.ff.width' is Null or not an object

This is the line (main.js):
Uj.prototype.Ow=function(a){return new N(a.x+this.ff.width,a.y+this.ff.height)};

Thanks,

=> Quang (Thursday 21-Aug-08 03:15 AM)

I met this error,too.Admin can explain for us? :( Thanks! *=> John (Saturday 23-Aug-08 01:22 PM)*


Hi, I have same problem, I discover that situation occurs when no markers on the map. *=> DDdeveloper (Wednesday 10-Sep-08 08:49 AM)*

Hi there, looks to be a great control but I can't seem to get your control to work.

if (hidEventName.Value == "PushpinMoved")
{
//Set event name to blank string, so on next postback same event doesn't fire again.
hidEventName.Value = "";
OnPushpinMoved(hidEventValue.Value);

This line doesn't seem to work, sine the hidEventName is in the contentTemplate, so it can't be accessed, or am I doing something wrong?

Cheers, Sarkie.

=> Sarkie (Friday 22-Aug-08 04:06 AM)

thank you

=> xna (Wednesday 03-Sep-08 09:39 AM)

hi.,
*I am having some problems in writing to databases... can u show me a sample test page where database connection is used
and the database design too..
*is it possible for me to convert a text file with lat and lang to a organized XML file.
thanks

=> hussain (Thursday 04-Sep-08 02:39 AM)

Thank You very much for your great control,I want to say that it
is the greatest one as I ever seen before.you save my life,you are
the god.

=> intrepid (Friday 05-Sep-08 12:43 AM)

H! Great article.
I have two questions.1-Can I use this without webservice?
and 2-I want a image from DBase along with text to b displayed in a bubble that comes when user click the pin.
For first question I tried to write methods in the code-behind file and using "PageMethods" I called them from javascript.Functions get called ,but with some script errors.
Can you comment on it please.

=> Nirav (Thursday 11-Sep-08 12:09 AM)

One More Problem
When I add more(50+) points on map it takes too long to get loaded.
What to do when we have thousands of loactions to be pointed on the map.

=> Nirav (Thursday 11-Sep-08 02:55 AM)

Thanks for a great control. In my part of the world (Kenya) we get some pretty lousy internet connections. When a connection fails partway the javascript fails at

if(GBrowserIsCompatible())

Now I can either move this into a try..catch block, or test that the function is instantiated first with

if(GBrowserIsCompatible)

I need to bubble this error up into an error event for the control that I can handle in the calling program.

The problem is that what I know about JavaScript is dangerous and I'd be very grateful for any suggestions you may have.

Regards Bob Morris

=> Bob Morris (Wednesday 17-Sep-08 01:47 PM)

This thing is awsome!!! Thank you so much. The only thing I am missing is Street View. Anyway to do this?

=> Dale (Thursday 25-Sep-08 08:53 AM)

First of all, great article. I have a question about Geocoding. I keep getting a 'request timed out' error when entering Seattle, WA in the GooglePoint address property. Its pretty much straight from the sample. Perhaps I'm doing something wrong. Any suggestions?

=> Sancho (Tuesday 07-Oct-08 03:23 PM)

Hi, you made a great job... It's very usefull control. But i've got a question, i try to get the ID of a point when i click on it to show it in a label...As you do with the pushpin moved. Is there a way to get back and handle the informations from the bubble???? Please answer me if you have any idea or anyone else got any idea...

Thank you.

=> panos (Wednesday 19-Nov-08 07:10 AM)

If I want to display a point's infoHTML by default, how would I do that? Whenever a point has some infoHTML, it should be displayed. How this can be done?

=> Sanket Apte (Saturday 29-Nov-08 11:51 PM)

Thank you very much for this great web user control.
How do I plot routemap or polyline based on some langitude and longitude values in a looop.

Any one please advice or guide me to any URL...of doumentation please..

thanks

venky

=> venky (Tuesday 02-Dec-08 12:58 PM)

Dear Shabdar,

Thanks for the great control....

I've got some queries...

How can I get the Latitude & Longitude of a point clicked on the map.

Thanks,
Yogesh J S

=> Yogesh (Wednesday 03-Dec-08 03:14 AM)

I was wondering if you have worked on the getBounds or adding the ability to get directions yet?

Charles

=> Charles Ralston (Thursday 04-Dec-08 02:51 PM)

No... *=> Yogesh (Thursday 04-Dec-08 10:29 PM)*

Discuss this article

You need to log in or register to participate in this discussion.

Posts in discussion

Posted: 1 day, 21 hours ago by leohh #188

phantastic work, Mr. Gata

just one question, ist there any possibility to add the extinfowindow class to customize the infowindow via css like the examples in

gmaps-utility-library.googlecode.com/svn...amples/cssSkins.html

would be great to have a little assist.

Thanks in advance
leohh

Posted: 1 month ago by temitope #173

Please,I extracted the downloaded source,copy the files needed on my application and dragged the GoogleMapForASPNET.ascx control to the page but I didn't see any blank Google Map after running it all I could see is an error page saying (Server Error in '/' Application,Parase Error:the base class includes the field 'GoogleMapForASPNet1',but its type(GoogleMapForASPNet) is not compatible with the type of contol(ASP.googlemapforaspnet_ascx)
Please can any one help me out, I really need your help.

Posted: 1 month ago by brunoaduartebh #172

DELETE THIS PLEASE

Posted: 1 month ago by brunoaduartebh #171

Is it possible to add a PanTo function on the API ? Instead of just setcenter ?

Also, setting a icon image for the center point doesn't work
GoogleMapForASPNet1.GoogleMapObject.CenterPoint = new GooglePoint("1", -19.91905, -43.938618, "RedCar.png", "Last", "Last",true);
the icon RedCar.png doesn't appear on the map.

And how can i make an PushPin Infowindow show up from application side ?
For example:
GoogleMapForASPNet1.GoogleMapObject.Points["LAST"].ShowInfo();
GoogleMapForASPNet1.GoogleMapObject.Points["LAST"].CloseInfo();

By the way, this is the BEST GoogleMaps API for .NET i've seen so far. Congratulations and thanks !

Posted: 1 month, 1 week ago by mkgitalia@gmail.com #163

where is it ?

Posted: 1 month, 1 week ago by maheedhar #162

Hello viewers , i am new to this forum....and i got a lot of information regarding my project in this forum....presently i am working on Vehicle tracking system....my major task is to dynamically move marker or pushpin on Google map from one place to another based on the predefined LAT/LNG values stored in the database(SQL server 2005).I am able to move the marker from one place to another not based on lat/lng values as shown in the code in the link .Can any one please help me. THANK YOU

Posted: 1 month, 1 week ago by maysam09 #160

hi again, i need to get and set 'marker' x and y in map,for example i need to show the marker in north east or south east of map to client,please help me about this problem..

Posted: 1 month, 2 weeks ago by jdj@jdj.dk #159

Hello khosh,

Did you get it to work in VB?

If you send me what you have converted so far, I'll try to help. But no promises :-)

-Jeppe

Posted: 1 month, 3 weeks ago by khosh #156

hi , you have created a great control
i changed language this control to vb.net
i did it successfully , but i can not change this code to vb.net:

public delegate void PushpinDragHandler(string pID);
public event PushpinDragHandler PushpinDrag;
public void OnPushpinDrag(string pID)
{
// Check if there are any Subscribers
if (PushpinDrag != null)
{
// Call the Event
GoogleMapObject = (GoogleObject)System.Web.HttpContext.Current.Session ["GOOGLE_MAP_OBJECT"];
PushpinDrag(pID);
}
}

I'm waiting for your help.

Posted: 2 months ago by maysam.rajabi@gmail.com #154

thanks a lot

Posted: 2 months ago by shabdar #153

Hi,
For zoom level please download latest version 1.8. I have made changes to the control and added a new OnZoomChanged() event that will give you current zoom level. Checkout MapWithZoomLevels.aspx sample in this release.

Posted: 2 months ago by maysam.rajabi@gmail.com #152

hi,,i have a problem and thats it --> i want to get the zoom when i change marker position

but the zoomlevel function isn't get real time zoomlevel..please help me,,,thanks for your great work

Posted: 2 months ago by maysam.rajabi@gmail.com #151

hi,,i have a problem and thats it --> i want to get the zoom when i change marker position

but the zoomlevel function isn't get real time zoomlevel..please help me,,,thanks

Posted: 2 months, 1 week ago by rajensharma #149

Sir,
I am having problem with script services namespace in GService.cs file during integration of your written code.Please help out me.

Rajender
This e-mail address is being protected from spambots. You need JavaScript enabled to view it.
+919625148372

Posted: 2 months, 2 weeks ago by rajensharma #147

Hello sir,
Please solve my problem related to using System.Web.Script.Services;
i am having on this line and [ScriptService] line of my GService file of app_code.I am having these 2 error during runtime.I wanna publish my website and want to use this map service in my
website: omsoftwaresolutions.com

Please help out me.

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

/// <summary>
/// Summary description for GService
/// </summary>
[WebService(Namespace = "http://omsoftwaresolutions.com")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]

Rajender
This e-mail address is being protected from spambots. You need JavaScript enabled to view it.
+919625148372

Posted: 2 months, 2 weeks ago by bilalhashmi #146

Thanks for nice control. Please tell me how can i remove polyline points icons. My requirement is to show line on map with only first and last point icon. I dont want pushpin icons for other point. Please help. its urgent

Posted: 3 months, 1 week ago by anilxxxmail1@gmail.com #144

Hi RazakLeo,,

can you try the attached sourcecode in the forum Topic--"Google maps." (file name-- Google.zip)

hope this will help you.

Regards
Anil

Posted: 3 months, 1 week ago by razakleo #143

Hei,Shabdar:

Thank you for your excellent work first. I work google map control in my website project. But when i create a project for ASP.Net web application the "GoogleObject" can not be found. I tried to do some changes for namespace, but it doesnot help. Could you give me help how to config GoogleMapForASPNET in web project? Thanks

Posted: 3 months, 1 week ago by anilxxxmail1@gmail.com #142

hi,

can you please tell me, where and how the "GUnload" function should be wriiten ?

Is it required or not in this Control?

Regards
Anil
This e-mail address is being protected from spambots. You need JavaScript enabled to view it.

Posted: 3 months, 1 week ago by anilxxxmail1@gmail.com #141

Hi,:

Great job done Shabdar, Thank you for your excellent work.

i want to add Label like any number (1,2,3..) or any text (A,B,C....) dynamically (lets assume -Marker Control-ID) in the Marker

Somebody can tell me how can I solve this problem?

Thank you

Regards
Anil
India
This e-mail address is being protected from spambots. You need JavaScript enabled to view it.

Posted: 3 months, 1 week ago by sam123 #139

I am getting points from a database and would like to dynamically add polylines to the maps in the while looping through the datareader

CODE---------------->

while (oRs.ReadData.Read())
{
//generate Points
int gid = (int)oRs.ReadData["Id"];
double dLat = (double)oRs.ReadData["Latitude"];
double dLng = (double)oRs.ReadData["Longitude"];
string sLocType = (string)oRs.ReadData["LocationType"];
string sMPS_ID = (string)oRs.ReadData["MPS_ID"];
string sCountry = (string)oRs.ReadData["country"];
string sCity = (string)oRs.ReadData["City"];
string sIconImage = (string)oRs.ReadData["IconImage"];

GooglePoint GP = new GooglePoint();
GP.ID = gid.ToString();
GP.IconImage = sIconImage;
GP.Latitude = dLat;
GP.Longitude = dLng;
GP.ToolTip = sLocType;
GP.InfoHTML = sMPS_ID + " - " + sLocType + " - " + sCountry + " - " + sCity;
GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP);

//add Polylines dynamically
GooglePolyline PL = new GooglePolyline();
PL.ID = "PL";
PL.ColorCode = "#0000FF";
PL.Width = 5;

//Here i would like to dynamically add polylines in the while loop
PL.Points.Add(GP1);
PL.Points.Add(GP2);
PL.Points.Add(GP3);
GoogleMapForASPNet1.GoogleMapObject.Polylines.Add(PL);

}

Posted: 3 months, 1 week ago by razakleo #138

Posted: 3 months, 2 weeks ago by Ramasubbu #136

i have use direction with map but below the address was not get the direction in google map,
Address A:2497 Airport Way SSeattle
Address B:4612 S Morgan StSeattle

Posted: 3 months, 3 weeks ago by renuka #133

Hi Shabdar,

I found your control and it helped me a lot in my application. I am drawing direction using more than 25 waypoints, is there any way to ignore one-way while drawing the route.

your help is appreciated.

Thanks,

Posted: 4 months, 1 week ago by hieu.nguyentat@gmail.com #130

hi Engineer,
i dont know when i draw over 125 points (line) to googllemap control, it can't draw (map is cleaned).

Nav view search

Navigation