Map marker OnClick event help

8 posts, 0 answers
  1. Ian
    Ian avatar
    1 posts
    Member since:
    Mar 2015

    Posted 30 Mar 2015 Link to this post

    Hi,

    I am using a RadMap and using a datasource to set my marker locations and all works fine the map displays and the marker on the map displays at the right positions. Now i want to create a ClientEvent that uses the OnMarkerClick event that will just return the DataTitleField from that marker in string format is there a way to do this

    Thanks
    Ian
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 30 Mar 2015 Link to this post

    Hi Ian,

    RadMap integrates the Kendo Map widget and all its client-side events are exposed in the ClientEvents inner tag. With the properties exposed there, you can attach an event handler to the Kendo Map markerClick event.

    Regards,
    Ianko
    Telerik
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nick
    Nick avatar
    17 posts
    Member since:
    Jan 2012

    Posted 01 Sep 2015 in reply to Ianko Link to this post

    It will be extremely helpful if you can show us an example of how to do this.
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 01 Sep 2015 Link to this post

    Hello Nick,

    The documentation provides examples:

    Nevertheless, here is a basic example that uses a declarative marker:

    <telerik:RadMap runat="server" ID="rm1">
        <ClientEvents OnMarkerClick="markerClickHandler" />
        <MarkersCollection>
            <telerik:MapMarker Shape="Pin" Title="This is <strong>HTML</strong> markup">
                <LocationSettings Latitude="51.500925" Longitude="-0.124507" />
            </telerik:MapMarker>
        </MarkersCollection>
        <CenterSettings Latitude="51.525619" Longitude="-0.111802" />
        <LayersCollection>
            <telerik:MapLayer Type="Tile"
                              UrlTemplate="http://a.tile.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png">
            </telerik:MapLayer>
        </LayersCollection>
    </telerik:RadMap>
    <script>
        function markerClickHandler(evt) {
            alert(evt.marker.options.title);
        }
    </script>


    Regards,

    Marin Bratanov
    Telerik
  6. Nick
    Nick avatar
    17 posts
    Member since:
    Jan 2012

    Posted 01 Sep 2015 in reply to Marin Bratanov Link to this post

    This doesn't work - I wish it was that simple but it returns a Parser Error - Type 'Telerik.Web.UI.MapClientEvents' does not have a public property named 'OnMarkerClick'.
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 01 Sep 2015 Link to this post

    Hi Nick,

    Can you confirm you are using the latest version of the controls (Q2 2015 SP2 at the time of writing)?

    An alternative is to get the Kendo Widget reference and use its bind() method. For example:

    <telerik:RadMap runat="server" ID="rm1">
        <ClientEvents  OnLoad="loadHandler" />
        <MarkersCollection>
            <telerik:MapMarker Shape="Pin" Title="This is <strong>HTML</strong> markup">
                <LocationSettings Latitude="51.500925" Longitude="-0.124507" />
            </telerik:MapMarker>
        </MarkersCollection>
        <CenterSettings Latitude="51.525619" Longitude="-0.111802" />
        <LayersCollection>
            <telerik:MapLayer Type="Tile"
                UrlTemplate="http://a.tile.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png">
            </telerik:MapLayer>
        </LayersCollection>
    </telerik:RadMap>
    <script>
        function markerClickHandler(evt) {
            alert(evt.marker.options.title);
        }
     
        function loadHandler(sender, args) {
            sender.get_kendoWidget().bind("markerClick", markerClickHandler);
        }
    </script>

    or even avoid any declarative events:

    <telerik:RadMap runat="server" ID="rm1">
        <MarkersCollection>
            <telerik:MapMarker Shape="Pin" Title="This is <strong>HTML</strong> markup">
                <LocationSettings Latitude="51.500925" Longitude="-0.124507" />
            </telerik:MapMarker>
        </MarkersCollection>
        <CenterSettings Latitude="51.525619" Longitude="-0.111802" />
        <LayersCollection>
            <telerik:MapLayer Type="Tile"
                UrlTemplate="http://a.tile.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png">
            </telerik:MapLayer>
        </LayersCollection>
    </telerik:RadMap>
    <script>
        function markerClickHandler(evt) {
            alert(evt.marker.options.title);
        }
     
        $telerik.$(document).ready(function () {
            $telerik.$("#<%=rm1.ClientID%>").data("kendoMap").bind("markerClick", markerClickHandler);
        });
    </script>


    Regards,

    Marin Bratanov
    Telerik
  8. Nick
    Nick avatar
    17 posts
    Member since:
    Jan 2012

    Posted 01 Sep 2015 in reply to Marin Bratanov Link to this post

    This is part of a large scale project that is using 2014 Q2 (which supports the RadMap). I cannot upgrade to 2015. 

     

    Your first example returns an error - Uncaught TypeError: sender.get_kendoWidget is not a function

    The second example does not work. 

     I have been struggling with this all day.

  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 01 Sep 2015 Link to this post

    Hello,

    The markerClick event has not been added to the Kendo Map in Q2 2014, it is available in later releases only. Perhaps the workaround from this thread will be helpful for you, at least until you can upgrade: http://www.telerik.com/forums/marker-click-event.

    Regards,

    Marin Bratanov
    Telerik
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017