none
Map control Shapes, issue with onClientClick event RRS feed

  • Question

  • My aim is to click on a PushPin Icon on the map, which should alert me with Title of the PushPin.

    Custom.aspx file has
    ==================
    <%@ Page Title="Custom" Language="C#" MasterPageFile="~/Work.Master" ValidateRequest="false" AutoEventWireup="true" CodeBehind="Custom.aspx.cs" Inherits="Comp.Unity.Custom" %>
    <%@ Register Assembly="Microsoft.Live.ServerControls.VE" Namespace="Microsoft.Live.ServerControls.VE"   TagPrefix="ve" %>
    <%@ Register Assembly="Microsoft.Live.ServerControls.VE" Namespace="Microsoft.Live.ServerControls.VE.Extenders"  TagPrefix="cc1" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">  
      
     <div style="text-align:left;" onload="OnPageLoad()" >

            <asp:UpdatePanel ID="UpdatePanelMap" runat="server" UpdateMode="Conditional" >

                <ContentTemplate>

                    <table id="tblCustomMap" width="100%" border="0" cellpadding="0px" width="470px" onload="alert("testing"); OnPageLoad();">

                        <tr style="white-space:nowrap;">

                            <td style="text-align:center;" colspan="2" ><span class="instruct">  click on location indicated by pushpin.</span></td>

                        </tr>

                        <tr>

                            <td colspan="2" align="center">

                                <ve:Map ID="mapCustom" runat="server" Height="367px" Width="390px" ZoomLevel="4" Dashboard="true" Center-Latitude="35.464942" Center-Longitude="-94.27567" OnServerClick="MapClick"
    onclientclick="function(s,e) {
        var theMap = $find(e.elementID);  
        var shape = theMap.GetShapeByID(e.elementID)
              if (shape.GetType() == VEShapeType.Pushpin)
              {
                        point = shape.GetPoints()[0];
                  alert(shape.GetTitle());
              }
        }" />


    I am getting error
    Microsoft JScript runtime error: Sys.ArgumentUndefinedException: Value cannot be undefined.
    Parameter name: id




    =========================================================
    When I tried following approach using seperate javascript function, I got following error

      <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
          
        function HandleLocationClick(e) {

                alert("HandleLocationClick");

                if (e.elementID) {

                    var shape = mapCustom.GetShapeByID(e.elementID);

                    var point = null;

                    if (shape.GetType() == VEShapeType.Pushpin)
              {
                        point = shape.GetPoints()[0];
                  alert(shape.GetTitle());
              }
                    else
                        point = shape.GetIconAnchor();

                    var zoom = mapCustom.GetZoomLevel() + 1;
                    map.SetCenterAndZoom(point, zoom);
                    return true;
                }

            }
       </script>

     <ve:Map ID="mapCustom" runat="server" Height="367px" Width="390px" ZoomLevel="4" Dashboard="true"
                                    Center-Latitude="35.464942" Center-Longitude="-94.27567" OnServerClick="MapClick" onclientclick="HandleLocationClick(s,e);" />


    The error I got was

    A runtime error has occured. Do you wish yo debug?
    Line 245 Error Experected '}'


    Any help is appreciated
    Thanks
    • Moved by Ricky_Brundritt Saturday, March 10, 2012 11:25 AM (From:Bing Maps: Map Control and Web services Development)
    Tuesday, March 3, 2009 5:29 AM

Answers

  • Hi

    Your problem with the first pieced of code is with 2 incorrect assumptions:

    1) That e holds the map click event arguement, it doesnt you need to use e.get_MapEvent()
    2) That the event target would be the Virtual Earth control itself, its not its a div element created to hold the map. To get the map control use s.id

    Also Id recommend putting the javascript method outside the event tag in the map control, it makes it much easier to debug these issues using FireBug which is what I did to sort out your issues.

    Ive put a complete code example below, with a simple pushpin added from the server side:

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
     
    <%@ Register Assembly="Microsoft.Live.ServerControls.VE" Namespace="Microsoft.Live.ServerControls.VE" TagPrefix="ve" %> 
     
    <!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 runat="server">  
        <title></title>  
        <script type="text/javascript">  
            function onClick(s, e) {  
                var cMapControlID = s.id;  
                var eevent = e.get_MapEvent();  
                var theMap = $find(cMapControlID);  
                var shape = theMap.GetShapeByID(event.elementID)  
                if (shape.GetType() == VEShapeType.Pushpin) {  
                    point = shape.GetPoints()[0];  
                    alert(shape.GetTitle());  
                }  
            }      
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
    <asp:ScriptManager runat="server" /> 
    <ve:Map ID="map" runat="server" Height="367px" Width="390px" ZoomLevel="4" Dashboard="true" Center-Latitude="35.464942" Center-Longitude="-94.27567" 
    onclientclick="onClick" /> 
        </form> 
    </body> 
    </html> 
     


    and the code behind

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
     
    public partial class _Default : System.Web.UI.Page   
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            map.AddShape(new Microsoft.Live.ServerControls.VE.Shape(Microsoft.Live.ServerControls.VE.ShapeType.Pushpin, new Microsoft.Live.ServerControls.VE.LatLongWithAltitude(35.464942, -94.27567)) { Title = "test" });  
        }  
     
    }  
     

    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware
    • Marked as answer by saikentr Thursday, March 5, 2009 4:05 PM
    Tuesday, March 3, 2009 8:23 AM
    Moderator

All replies

  • Hi

    Your problem with the first pieced of code is with 2 incorrect assumptions:

    1) That e holds the map click event arguement, it doesnt you need to use e.get_MapEvent()
    2) That the event target would be the Virtual Earth control itself, its not its a div element created to hold the map. To get the map control use s.id

    Also Id recommend putting the javascript method outside the event tag in the map control, it makes it much easier to debug these issues using FireBug which is what I did to sort out your issues.

    Ive put a complete code example below, with a simple pushpin added from the server side:

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
     
    <%@ Register Assembly="Microsoft.Live.ServerControls.VE" Namespace="Microsoft.Live.ServerControls.VE" TagPrefix="ve" %> 
     
    <!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 runat="server">  
        <title></title>  
        <script type="text/javascript">  
            function onClick(s, e) {  
                var cMapControlID = s.id;  
                var eevent = e.get_MapEvent();  
                var theMap = $find(cMapControlID);  
                var shape = theMap.GetShapeByID(event.elementID)  
                if (shape.GetType() == VEShapeType.Pushpin) {  
                    point = shape.GetPoints()[0];  
                    alert(shape.GetTitle());  
                }  
            }      
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
    <asp:ScriptManager runat="server" /> 
    <ve:Map ID="map" runat="server" Height="367px" Width="390px" ZoomLevel="4" Dashboard="true" Center-Latitude="35.464942" Center-Longitude="-94.27567" 
    onclientclick="onClick" /> 
        </form> 
    </body> 
    </html> 
     


    and the code behind

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
     
    public partial class _Default : System.Web.UI.Page   
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            map.AddShape(new Microsoft.Live.ServerControls.VE.Shape(Microsoft.Live.ServerControls.VE.ShapeType.Pushpin, new Microsoft.Live.ServerControls.VE.LatLongWithAltitude(35.464942, -94.27567)) { Title = "test" });  
        }  
     
    }  
     

    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware
    • Marked as answer by saikentr Thursday, March 5, 2009 4:05 PM
    Tuesday, March 3, 2009 8:23 AM
    Moderator
  • Thank you Brian
    Thursday, March 5, 2009 4:06 PM
  • Hi

    Your problem with the first pieced of code is with 2 incorrect assumptions:

    1) That e holds the map click event arguement, it doesnt you need to use e.get_MapEvent()
    2) That the event target would be the Virtual Earth control itself, its not its a div element created to hold the map. To get the map control use s.id

    Also Id recommend putting the javascript method outside the event tag in the map control, it makes it much easier to debug these issues using FireBug which is what I did to sort out your issues.

    Ive put a complete code example below, with a simple pushpin added from the server side:

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
     
    <%@ Register Assembly="Microsoft.Live.ServerControls.VE" Namespace="Microsoft.Live.ServerControls.VE" TagPrefix="ve" %> 
     
    <!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 runat="server">  
        <title></title>  
        <script type="text/javascript">  
            function onClick(s, e) {  
                var cMapControlID = s.id;  
                var eevent = e.get_MapEvent();  
                var theMap = $find(cMapControlID);  
                var shape = theMap.GetShapeByID(event.elementID)  
                if (shape.GetType() == VEShapeType.Pushpin) {  
                    point = shape.GetPoints()[0];  
                    alert(shape.GetTitle());  
                }  
            }      
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
    <asp:ScriptManager runat="server" /> 
    <ve:Map ID="map" runat="server" Height="367px" Width="390px" ZoomLevel="4" Dashboard="true" Center-Latitude="35.464942" Center-Longitude="-94.27567" 
    onclientclick="onClick" /> 
        </form> 
    </body> 
    </html> 
     


    and the code behind

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
     
    public partial class _Default : System.Web.UI.Page   
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            map.AddShape(new Microsoft.Live.ServerControls.VE.Shape(Microsoft.Live.ServerControls.VE.ShapeType.Pushpin, new Microsoft.Live.ServerControls.VE.LatLongWithAltitude(35.464942, -94.27567)) { Title = "test" });  
        }  
     
    }  
     

    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware
    I tried your option, and then click on the map, nothing happens
    Monday, October 10, 2011 1:51 PM