This project is read-only.

Integrate Google Samples with GoogleMap control?

Feb 26, 2008 at 1:25 PM
Edited Feb 26, 2008 at 2:20 PM
Does anyone use the google api with the GoogleMaps control itself? I am looking at the google map samples and there are several things we need to do at work demonstrated in those samples. The source code is provided with those samples so it is simple a matter of whether or not the sample code can be made to work with the GoogleMaps control.

The first link allows a user to select a value to a location and the google map scrolls to that location and displays the tooltip. It would be preferable to be able to zoom as well. The source code may be view at this link.

How may I integrate the Google samples with the GoogleMap control?

It appears there "may" be a vote item here. Some of the examples I am looking at extend the attributes of the marker via prototyping. In order to accomplish some of these tasks, client-side, might it be necessary to do the same somehow with the marker object? For example the toggle marker adds a "type" property to the prototyped marker object in javascript which provides a way to group or filter markers.

The second link allows a user to toggle markers on and off (show/hide) by group. The source code may be used at this link.
Feb 26, 2008 at 5:23 PM
If I get you right, you ask can those both samples from google api be done using GoogleMap control.
It is interesting question.
First sample I think can be done using GoogleMap control even now.
About second, It will require GoogleMarker to be extended.
I think it will be valueble to add property Visible to the GoogleMarker and maybe Group property to enble grouping markers.

I will think of providing some samples with GoogleMap control based on the google maps api samples, as well.

Feb 27, 2008 at 8:09 AM
I tried something like the following to show the window in the marker. But I get "map.panTo is not a function" error(from firebug).

function OpenWindow(lat, lng)
var map = <%=GoogleMap1.ClientMapID%>;
var center = map.panTo(new GLatLng(lat, lng));
map.openInfoWindow(center, "asdasd");

I'd love to see the samples you are going to post! Thanks a lot for doing this!
Feb 27, 2008 at 9:37 AM
You almost done it. Just GoogleMap control provides a wrapper js object and if you want to reference GMap2 object in it you should use _gmap.
Here is how you have to change the code:
function OpenWindow(lat, lng)
var map = <%=GoogleMap1.ClientMapID%>._gmap;
var center = map.panTo(new GLatLng(lat, lng));
map.openInfoWindow(center, "asdasd");

Feb 27, 2008 at 4:08 PM
Hi velio,
Thanks for the quick response. I tried that and now I have a different error as follows.

a has no properties
fromLatLngToPixel(undefined, 16)main.js (line 443)
Vb(undefined)main.js (line 654)
o(undefined, undefined)main.js (line 651)
o(undefined, undefined)main.js (line 599)
reset(undefined, Object contentElem=div, (42, 20) width=42 height=20 widthUnit=px heightUnit=px, undefined, undefined)main.js (line 1259)
Kl(undefined, Object contentElem=div, (42, 20) width=42 height=20 widthUnit=px heightUnit=px, Object)main.js (line 1295)
cc((42, 20) width=42 height=20 widthUnit=px heightUnit=px, (42, 20) width=42 height=20 widthUnit=px heightUnit=px)main.js (line 1293)
fo()main.js (line 1168)
Break on this error Eg.prototype=new Qj;Eg.prototype.fromLatLngToPixel=function(a,b){var c=this,d=c....

Also, is this possible from the server side? i.e providing OpenInfoWindow() for the markers so that when this function is called marker it will trigger an event?

Feb 27, 2008 at 4:24 PM
Edited Feb 27, 2008 at 4:28 PM

I thought you need this for something special otherwise you have next choises implemented:
  • Text property of GoogleMap control, which opens info window by default on the map center;
  • Text property of a marker (which you can add to center of map) which in opened on marker click;
  • InfoWindowEvent property of marker to control on which event info window to be shown - Click, DoubleClick, MouseDown, MouseOut, MouseOver, MouseUp (since release 2.8.2);
  • Then you have next properties of GoogleMap control which you can use to attach client-side code to move, move end, move start events - OnClientMove, OnClientMoveEnd, OnClientMoveStart.
  • You have GoogleMap events triggered to server-side code - OnMove/Move, OnMoveEnd/MoveEnd and OnMoveStart/MoveStart. You can attach a server-side code to those events;

Please, give me more details about your need and I didn't get well what you mean by this: i.e providing OpenInfoWindow() for the markers so that when this function is called marker it will trigger an event?

Feb 27, 2008 at 6:36 PM
Basically what I was trying to accomplish is exactly as in this link:

My code behind adds the Markers to GoogleMap control as follows:

GoogleMarker m1 = new GoogleMarker(27.670858, 85.327399);
m1.Text = "one";
GoogleMarker m2 = new GoogleMarker(27.6727, 85.327399);
m2.Text = "two";

Link buttons are also dynamically created as:
LinkButton lnk1 = new LinkButton();
lnk1.Text = "one";
LinkButton lnk2 = new LinkButton();
lnk2.Text = "one";

Now I wanted to associate lnk1.OnClientClick event to open up the window in respective marker. How can this be accomplished?

Feb 27, 2008 at 7:17 PM
Yes. This is the functionality I am trying to achieve as well. Still working on it!
Feb 27, 2008 at 7:17 PM
Edited Feb 27, 2008 at 7:19 PM
Yes. This is the functionality I am trying to achieve as well. Still working on it!

I am not sure how this double posted.
Feb 27, 2008 at 8:48 PM
I have something similar to the example

I have the following in the code behind.

protected void Page_Load(object sender, EventArgs e)

GoogleMap1.View = GoogleMapView.Satellite;
GoogleMap1.Zoom = 16;

double[] lat = { 27.670858, 27.670058 };
double[] lng = { 85.327399, 85.327399 };
StringBuilder [] htmls = new StringBuilder2;
htmls0 = new StringBuilder(string.Format("'This is Marker 1 at {0} {1}'", lat0, lng0));
htmls1 = new StringBuilder(string.Format("'This is Marker 2 at {0} {1}'", lat1, lng1));

GoogleMap1.Latitude = lat0;
GoogleMap1.Longitude = lng0;

for (int i = 0; i < lat.Length; i++ )
GoogleMap1.Markers.Add(new GoogleMarker(lati, lngi));
Literal li = new Literal();
li.Text = string.Format("<li> <a href=\"#\" onclick=\"{0}\">{1}</a> </li>", ShowInfoWindow(lati,lngi,htmlsi), "some place 1");

private StringBuilder ShowInfoWindow(double lat, double lng, StringBuilder html)
return new StringBuilder(string.Format("ShowInfoWindow({0},{1},{2})", lat, lng, html));

And in the client side I have :

function ShowInfoWindow(lat, lng, html)
var htm = "nothing here";
var map = <%=GoogleMap1.ClientMapID%>._gmap;
map.panTo(new GLatLng(lat, lng));
map.openInfoWindow(new GLatLng(lat, lng), htm);

I also have <ul id="ul" runat="server"></ul> in the UI page(aspx).

Basically we load all the markers and related links when the page first loads. Assign OnClick of the links. The above is fine but I thought we had that control on the server side.

What I was thinking was a method on a marker such as: myMarker.OpenWindow();

This can then be called inside the OnClick/OnCommand event of a LinkButton/Button as:
protected void DrawMarker(object sender, CommandEventArgs e)
myMarker.OpenWindow(); //this will open the window in a marker and display whatever is in Text.



Feb 28, 2008 at 1:20 PM
Now I think I get your idea.
Won't be a problem to add that in next release.