Map marker OnClick event help

[Ian]

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

[Ianko]

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

[Nick]

It will be extremely helpful if you can show us an example of how to do this.

[Marin Bratanov]

Hello Nick,

The documentation provides examples:

• for handling events: http://docs.telerik.com/devtools/aspnet-ajax/controls/map/client-side-programming#client-side-events.
• for using markers: http://docs.telerik.com/devtools/aspnet-ajax/controls/map/functionality/markers.
• for using the Kendo objects you will get: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/map#events-markerClick.

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

[Matt]

This is no longer available in newer versions of the DLLs, which is a shame and now I can't find support or help on how to work with newer versions, which break nice functionality. I might have to revert...

[Peter Milchev]

Hi Matt, would you please share which functionality is missing in the newer versions? I have tested the shared snippet as is and the alert pops out once the marker is clicked. If you have any issues with the shared code, you can submit a Support Ticket and we can assist you to resolve the issues.

In the meantime, you can check if there are any JavaScript errors on the page that would prevent the proper behavior of the controls:

• https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/common-general-troubleshooting-javascript-errors 

[Nick]

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'.

[Marin Bratanov]

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

[Nick]

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.

[Marin Bratanov]

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