This project is read-only.

Marker Click Event Sample?

Feb 3, 2009 at 3:14 PM
Hello Velio,
could you create a sample/post some code for the click events of markers, or events of the map?
I want to use your control in my project, it looks great!

What I'm currently trying to do is, to give each marker an ID and when the user clicks on one marker a new page should be loaded with the ID as request variable. Sounds quite simple...

Thanks!
Feb 6, 2009 at 3:41 AM
I have same problem.  Basic problem is how to communicate to server the info on a marker event, namely the marker index and event (e.g. MouseOver) .  A 2nd related problem is when the user clicks on a point on the map, communicating to the server the lat/long of the click.

Here is what I have figured out so far:
a) when loading markers you will do something like:
      GoogleMarker gm = new GoogleMarker( 35.749771,-78.751251));
      gm.Title="My Marker Title";
      gm.MouseOver += Marker_MouseOver;
      GMap1.Markers.Add(gm);
The emitted script on the page includes code:
GMap1.addMarker({"Address":null,"AutoPan":true,"Bouncy":false,"Clickable":true,"Draggable":false,"DragCrossMove":false,"GoogleEvents":{"ServerEvents":[{"Key":"mouseover","Handler":"__doPostBack('GMap1','marker_event$0$mouseover')"}]},"IconAnchor":{"X":8,"Y":16},"IconSize":{"Height":16,"Width":16},"ImageUrl":null,"InfoWindowAnchor":{"X":0,"Y":0},"Latitude":35.749771,"Longitude":-78.751251,"OpenInfoBehaviour":0,"ShadowSize":{"Height":16,"Width":16},"ShadowUrl":null,"Text":"Property","Title":"My Marker Title"});

b) I know there is an event raised on the server because the markers all disappear when I do a mouseover.  (I have the Map control inside of an AJAX UpdatePanel.) The question is how to handle the event and determine what marker raised the event. 

c) I have looked the Sample Website, which is very cool.  I do not see any examples of server handling of marker or point click events.

Any help appreciated.  Simple example would be great.

Feb 6, 2009 at 8:45 AM
Damn. just writing this the second time because of the internet connection and some modal popup......

Hello jjcraw,

I've got a kind of workaround but it is not working perfect yet. It's based on this:
http://codeclimber.net.nz/archive/2007/06/26/How-to-refresh-an-UpdatePanel-from-javascript.aspx

I'm setting a client side click function for the markers, which could also be done in the code behind.
Then I've got a textbox which gets the value from the JavaScript function and the function also clicks the button. (Both can be set to invisible through CSS)

The problems of this solution is, that the GMap looses its state (position, zoom) when clicking the button, even if its not in an Update Panel or anything. I'm still new to ASP.Net so maybe you have an improvement?
Thanks!


aspx content:

<script type="text/javascript">
function UpdPanelUpdate(value)
{
   var obj = document.getElementById("<%= text.ClientID %>");
   obj.value=value.toString();
   var button = document.getElementById("<%= button.ClientID%>");
   button.click();
}
</script>


    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    
    
    <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
  <ContentTemplate>
    <asp:Label ID="label" runat="server">hallo</asp:Label>
  </ContentTemplate>
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="button" EventName="Click" />
  </Triggers>
</asp:UpdatePanel>
    
    <asp:TextBox ID="text" runat="server">
    </asp:TextBox>
    <asp:Button ID="button" runat="server" OnClick="button_Click" />
    
    
    <artem:GoogleMap ID="GMap" runat="server" Width="480px" Height="400px" Address="USA" Zoom="4" EnableScrollWheelZoom="true" InsideUpdatePanel="false">
        <Markers>
        <artem:GoogleMarker OnClientClick="UpdPanelUpdate('Michigan')" Address="Michigan"> </artem:GoogleMarker>
        <artem:GoogleMarker OnClientClick="UpdPanelUpdate('Indianapolis')" Address="Indianapolis"></artem:GoogleMarker>
        <artem:GoogleMarker OnClientClick="UpdPanelUpdate('Wisconsin')" Address="Wisconsin"></artem:GoogleMarker>
                
        
        </Markers>
    </artem:GoogleMap>

Code behind:
protected void button_Click(object sender, EventArgs e)
    {
      label.Text = text.Text;

    }


Feb 9, 2009 at 2:24 PM

Some progress on several issues:

1. Using PeterFile's approach I was able to detect a mouseover and communicate the marker event on the server.  The relevant portions of the code:
a. When after creating the marker gm in a loop with loop variable i, attach an event:
        gm.OnClientMouseOver="Marker_MouseOver(" +i.ToString()+ ")";
b. In the page's javascript to send the marker number to the server:
         <script type="text/javascript">
            function Marker_MouseOver(i) {
                var obj = document.getElementById("<%= text.ClientID %>");
                obj.value = i;
                var button = document.getElementById("<%= button.ClientID%>");
                button.click();
            }
        </script>
 c. On the server:
    protected void button_Click(object sender, EventArgs e) {
        string S = text.Text;
        [[do other stuff]]
    }
d. Note: There should be a better way of doing this using the methods of the control.  With a lot of markers, the control is emitting a lot of javascript.

 

2. On the issue of losing markers and using the AJAX Update Panel, I got around this by creating the markers in the Form_Load block.  Note the following:
a. On updates using an UpdatePanel, this routine is still called.  If you created the markers dynamically outside of the Load routine, you will lose them.
b. Using the PostbackPersistance.aspx example, you can see how  to persist to the Session information about the map.  I believe you can persist marker information, but have not confirmed this.
c. Perhaps it is a bug, but it would seem the control should automatically handle this.

3. General thoughts on proceeding:
a. I am conditioned to think of the state of the application to be on the server.  I think this is wrong for this control.  Many AJAX samples communicate with the server via web services.  This is what I am going to try to make work.  In my case, I want to display additional info about a market.  My plan to to detect a client MouseOver, invoke a web service retrieval, and then update the page using the data retrieved via javascript.  No server events, no page refreshes.  Perhaps a bit more javascript than I would like, but I think this inevitable.
b. Only hit the server when you want to persist information about the control such as center, zoom, etc.
c. From a performance point of view, this will be much better as there will not be as much saving to the Session and rebuilding pages.

 

 

 

 

 

 

 

        

 

Feb 9, 2009 at 4:06 PM
Hi jjcraw,

thanks for the code! In the meantime I looked at another Google Maps Control which you can find at http://de.googlemaps.subgurim.net/ejemplos/empezar.aspx
Maybe you allready know about it...
It is not opensource like velios, but the development stage seems higher. Also there is an example for server sided events...



Feb 9, 2009 at 4:40 PM
Thanks for tip. It does look more advanced. Wish forums were in English. Are you going in that direction?
John
John Crawford
Off: 770-394-5090
Fax: 678-935-9489


From: PeterFile [mailto:notifications@codeplex.com]
Sent: Monday, February 09, 2009 11:07 AM
To: jjcraw@mindspring.com
Subject: Re: Marker Click Event Sample? [googlemap:46082]

From: PeterFile

Hi jjcraw,

thanks for the code! In the meantime I looked at another Google Maps Control which you can find at http://de.googlemaps.subgurim.net/ejemplos/empezar.aspx
Maybe you allready know about it...
It is not opensource like velios, but the development stage seems higher. Also there is an example for server sided events...



Feb 9, 2009 at 9:20 PM
yes.. I think I'll stay with that one. It is as easy to setup as the control here, the license model is a joke and most of the forums is in English I think.

If you also want to give it a try this code will safe you 20-30min. 15 min of that time I spent looking for the bug, why my markers are not visible, or the map stays grey. That seems to be because of the hardcoded ID name. But we definitly should switch to the subgurims forum after this.
If I had further knowlege at ASP and JS, I'd more like to help velio, but thats not the case :/

Add marker:

var marker = new GMarker(new GLatLng(point.Latitude,point.Longitude));
marker.ID = "marker_subgurim_" + point.PointID.ToString();
myGMap.Add(marker);

Map code behind:

protected string MyGMapMarker_Click(object s, GAjaxServerEventArgs e)
    {
      int pointID = Utils.GetIntFromPointID(e.who);
     DoSomethingOnThe Server(pointID)     
      return "";      } //returns a string which gets executed as JS

Map.aspx

<cc1:GMap ID="myGMap" runat="server" OnMarkerClick="MyGMapMarker_Click" />

Utils.cs

internal static int GetIntFromPointID(string p)
    {
      return Convert.ToInt32(p.Remove(0, 16)); // cut 223 from "marker_subgurim_223"
    }