Google Maps Control for ASP.Net - Part 2

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

Google Map Control Logical 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)




Posted: 1 month 1 week ago by karimabobakr #594
karimabobakr's Avatar
hi , thanks alot for this rich resource my question is :-
what code shoud i add in c# here to read google maps offline
as i have foder called Map i downlood all maps offline with all api of js than i want to write some thing in C# mean return "/Map"+zoom+"/"+coord.x+"/"+coor.y+".png"
Posted: 3 months 4 weeks ago by Prajapati #593
Prajapati's Avatar
Hello sir,
i want to move vehicle with live data please help me out
Posted: 6 months 3 days ago by shabdar #592
shabdar's Avatar
barryfzy wrote:
Apparently no one comes here anymore. Just in case someone does and had this problem I got it fixed by changing a line in GOogleMapForASPNet.ascx from

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>

to

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=MyCodeHere></script>

Thank you barryfzy for reporting this problem. I have fixed this issue and uploaded new version 1.9.3. You need to get your own Google Map API key and enter it in web.config file in below section.
<add key="GoogleAPIKey" value="Enter Your API Key Here"/>. Map will work after that.
Posted: 6 months 3 weeks ago by barryfzy #590
barryfzy's Avatar
Apparently no one comes here anymore. Just in case someone does and had this problem I got it fixed by changing a line in GOogleMapForASPNet.ascx from

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>

to

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=MyCodeHere></script>
Posted: 7 months 4 days ago by barryfzy #589
barryfzy's Avatar
I got an API Key from Google and put in the web.config. The maps still come up and display but then it immediately show Ooops and error occurred. The error that shows in the console is that it is that now key was provided. I don't know what to do to fix this?????
Posted: 1 year 2 months ago by rajnair1960 #586
rajnair1960's Avatar
Hi,

Any example wherein latitude and longitude extracted from MS SQL Server database to draw route or polylines?


Please advice.

Regards
Posted: 1 year 2 months ago by shark.krish@gmail.com #585
shark.krish@gmail.com's Avatar
Hi,

Thanks for Google MAPs for ASP.Net Control. I have one problem I am not getting the right precision while reverse geocoding by entering Latitude and Longitude which i am getting exact place using Google Maps Website.
Posted: 1 year 8 months ago by suguna #583
suguna's Avatar
I have implemented this code, it was sucessful but now my map is not loading. I can able to see my marker but map is missing.
Posted: 2 years 1 month ago by dhillu143@gmail.com #572
dhillu143@gmail.com's Avatar
How Can I use more Google Map Controls on a single Web page......?
Please somebody help me....





Thanks & Regards,
Dhillu.
Posted: 2 years 1 month ago by dhillu143@gmail.com #571
dhillu143@gmail.com's Avatar
Can I use more GoogleMapControls on a single Web page......?
Please somebody help me....
Posted: 2 years 3 months ago by Fhahroz #564
Fhahroz's Avatar
There is a pushpin click event bug in your control, don't know if you guys have find one or not, that click event works only for one marker. I thought i was mistaking somewhere but then i opened the demo project and ran the multiple pushpins click event page i found the same bug the click event was working only for one marker. Need an urgent help on this please.

Regards
Posted: 2 years 4 months ago by muteb1010 #556
muteb1010's Avatar
Hi,

First of all thank you for the control. My issue is that I have three dropdownlists( counrties,cities and areas). When I narrow down accordingly to show the country, the city and the neighborhood on the map, they work fine and I could see the neighborhood clearly. However, if I want to click on specific street or house in the neighborhood, the MapClicked function doesn't fire anymore after the previous three postback.


have you faced this issue? can you please provide me with a solution.

Regrads
Posted: 2 years 7 months ago by meysamg #482
meysamg's Avatar
Hi :

i want use map click event but. it does not work in mozilla firefox.you can try it in mozilla :

http://shabdar.somee.com/MapClickEvent.aspx

icon not show when click the map. it work in chrone and IE but now work in moziila.

please help me ?
Posted: 2 years 10 months ago by tardeh #466
tardeh's Avatar
Help!

I am trying to use the Google Maps control but the moment I drag it onto my page and build my application, i get errors. something like "The namespace Google object could not be found. Are you missing a using directive?"

I am running VS 2010
Posted: 3 years 2 weeks ago by huynhle3005 #465
huynhle3005's Avatar
Ghorbani wrote:
Hi,
I create project with your grate control
i have Ques :
is there any limitation in number of points in polyline because i cannot drow polyline with more than 291 ?
my sample code is

for (int i = 0; i < dt2.Rows.Count; i++)

{

GooglePoint GP = new GooglePoint();
GP.ID = "GP" + i.ToString();
GP.Latitude = double.Parse(dt2.Rows[3].ToString());
GP.Longitude = double.Parse(dt2.Rows[2].ToString());

//LastPoint_Longitude = double.Parse(dt2.Rows[2].ToString());

//LastPoint_Latitude = double.Parse(dt2.Rows[3].ToString());

PL1.Points.Add(GP);


}

when my dt2.Rows.Count is more than 291 nothing will not drow
please help
thank you

==========
The maximum number is 279 marker. Why?
Posted: 3 years 1 month ago by Nambukarthy Raveendran #464
Nambukarthy Raveendran's Avatar
Hi Shabdar,

I have created the directions between multiple points but i have to delete the directions when i click the button which is in update panel, so can u tell me how to do that?
Posted: 3 years 1 month ago by Nambukarthy Raveendran #461
Nambukarthy Raveendran's Avatar
Hello bro, can u explain how to create direction between multiple lat and lng instead of giving multiple address
Posted: 3 years 1 month ago by pranali #460
pranali's Avatar
Did you got any solution then please share with I ....I am also facing same problem
Posted: 3 years 2 months ago by Ghorbani #457
Ghorbani's Avatar
Hi,
I create project with your grate control
i have Ques :
is there any limitation in number of points in polyline because i cannot drow polyline with more than 291 ?
my sample code is

for (int i = 0; i < dt2.Rows.Count; i++)

{

GooglePoint GP = new GooglePoint();
GP.ID = "GP" + i.ToString();
GP.Latitude = double.Parse(dt2.Rows[3].ToString());
GP.Longitude = double.Parse(dt2.Rows[2].ToString());

//LastPoint_Longitude = double.Parse(dt2.Rows[2].ToString());

//LastPoint_Latitude = double.Parse(dt2.Rows[3].ToString());

PL1.Points.Add(GP);


}

when my dt2.Rows.Count is more than 291 nothing will not drow
please help
thank you
Posted: 3 years 2 months ago by Radders #456
Radders's Avatar
Hi,

I have downloaded your code, and created a new project in VS 2012 and added all the files from the ZIP.

However, it will not compile and gives these errors:

Type 'Samples_SimpleMapWithMovingPushPins' already defines a member called 'Page_Load' with the same parameter types
Type 'MapWithAutoMovingPushpins' already defines a member called 'Timer1_Tick' with the same parameter types
Type 'MapWithAutoMovingPushpins' already defines a member called 'Page_Load' with the same parameter types
The type or namespace name 'GoogleObject' could not be found (are you missing a using directive or an assembly reference?)
The type or namespace name 'GoogleObject' could not be found (are you missing a using directive or an assembly reference?)

Please advise what I should do. Thanks
Posted: 3 years 2 months ago by jeetendra72 #455
jeetendra72's Avatar
hi

Lately my google maps web app developed with API 1.7 in ASP.NET was working ok and suddenly it has stopped working and no data/push pin can be seen.

I upgraded the API to 1.92, using ASP.NET under 4.5 framework on VS2012. still it does not work.

I have tried to create a new project with API 1.92 but all in vain

can anybody assist us asap us.
Posted: 3 years 2 months ago by engineer #453
engineer's Avatar
why maps like this when i run. have 2 maps. any solution.
Posted: 3 years 3 months ago by vijayakanthap #452
vijayakanthap's Avatar
Hi how to capture the date from google traffic layer?

Also need help on getting the road information from code?
Posted: 3 years 3 months ago by dnorris #449
dnorris's Avatar
I want to automatically display the infohtml when the map loads. How can I accomplish this?

The infohtml is already defined for a GooglePoint.
Posted: 3 years 3 months ago by ccerdaz #448
ccerdaz's Avatar
Dear friend, thank you for this control. I have some trouble when I open two or more pages with maps. In this case, the markers, polylines and poligons are cloned in all pages. May be because they are using the same groups of files and the same user session. Can you show me how avoid this situation?