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
7 Answers, 1 is accepted
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

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
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:

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

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.
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,
Telerik