Events Handling

This was a response to a discussion issue, but I have decided it a good to publish it here as a sample.

Questrions

  • First is it possible to change the layout of the popup that shows up when clicking on a marker?
  • And is it possible to just show the text of the marker when holding the mouse over the marker?

Sure you can, especially after release 2.8 now.
You can attach client-side or server-side code to any google map or google marker event.
Here bellow are quick and simple samples in answer to your questions

Change the layout of the popup that shows up when clicking on a marker

Client-side sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>GoogleMap Control Events Sample</title>
</head>
<body>

    <script type="text/javascript">
        var _myInfoWindowVisible = false;
        
        function showMyInfoWindow() {
            var win = document.getElementById('myInfoWindow');
            win.style.display = 'block';
            win.style.left = '100px';
            win.style.top = '100px';
            _myInfoWindowVisible = true
        }    
        
        function hideMyInfoWindow() {
        
            if(_myInfoWindowVisible) {
                var win = document.getElementById('myInfoWindow');
                win.style.display = 'none';                
                _myInfoWindowVisible = false;
            }
        }
        
        
    </script>
    <form id="form1" runat="server">
    <div>
        <artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Zoom="12" Key="ABQIAAAAojJioor-0DqvjrLmqzbsCBSHfJdw_wxpIi7yvLx_S62UleXEFBTZDT_q2dweY6mh547lELAmifIhVg"
            Address="roma italia">
            <Markers>
                <artem:GoogleMarker Address="roma italia" Draggable="true" OnClientClick="showMyInfoWindow()" />
            </Markers>
        </artem:GoogleMap>
        <div id="myInfoWindow" style="background-color: White; position: absolute; border: solid 1px #999; padding: 10px;
            display: none;" onclick="hideMyInfoWindow()">
            This is some custom info window.<br />
            Text here could be provided dynamically by server-side code for example.
        </div>
    </div>
    </form>
</body>
</html>
Server-side sample
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>GoogleMap Control Events Sample</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" AsyncPostBackTimeout="900"
        EnableScriptGlobalization="true" EnableScriptLocalization="true">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server" RenderMode="Block" UpdateMode="Conditional" ID="upn_mappa">
        <ContentTemplate>
            <artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Zoom="5" Key="ABQIAAAAojJioor-0DqvjrLmqzbsCBSHfJdw_wxpIi7yvLx_S62UleXEFBTZDT_q2dweY6mh547lELAmifIhVg"
                Address="wien austria">
                <Markers>
                    <artem:GoogleMarker Address="roma italia" Text="Rome was clicked" OnClick="HandleMarkerClick" />
                    <artem:GoogleMarker Address="wien autria" Text="Wien was clicked" OnClick="HandleMarkerClick" />
                    <artem:GoogleMarker Address="berlin germany" Text="Berlin was clicked" OnClick="HandleMarkerClick" />
                </Markers>
            </artem:GoogleMap>
            <asp:Literal ID="_ltrText" runat="server"></asp:Literal>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

C# - code behind
protected void HandleMarkerClick(object sender, EventArgs e) {
    GoogleMarker marker = sender as GoogleMarker;
    if (marker != null) {
        _ltrText.Text = marker.Text;
    }
}

Show the text of the marker when holding the mouse over the marker

Client-side
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>GoogleMap Control Events Sample</title>
</head>
<body>

    <script type="text/javascript">
        function showInfo(text) {
            var el = document.getElementById('info');
            if(el) el.innerHTML = text;
        }
    </script>

    <form id="form1" runat="server">
    <artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Zoom="5" Key="ABQIAAAAojJioor-0DqvjrLmqzbsCBSHfJdw_wxpIi7yvLx_S62UleXEFBTZDT_q2dweY6mh547lELAmifIhVg"
        Address="wien austria">
        <Markers>
            <artem:GoogleMarker Address="roma italia" OnClientMouseOver="showInfo('Rome was pointed')"/>
            <artem:GoogleMarker Address="wien autria" OnClientMouseOver="showInfo('Wien was pointed')"/>
            <artem:GoogleMarker Address="berlin germany" OnClientMouseOver="showInfo('Berlin was pointed')"/>
        </Markers>
    </artem:GoogleMap>
    <div id="info"></div>
    </form>
</body>
</html>


That's in short folks ...
Hope this helps.

Regards

Last edited Feb 15, 2008 at 7:43 AM by velio, version 1

Comments

mcourter Jan 10, 2014 at 2:25 PM 
just noticed someone posed this question back in 2012. oh well....

mcourter Jan 10, 2014 at 2:24 PM 
in your example you create the markers in markup. how can I add a click event to a marker created in code behind? I need to refresh my page with new markers whenever a user makes a change on my page. so the click event needs to be created then too.

orhancc Feb 12, 2012 at 12:16 AM 
How can i bind events in codebehind while adding markers ?