This is a migrated thread and some comments may be shown as answers.

Map marker OnClick event help

7 Answers 168 Views
Map
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 30 Mar 2015, 10:55 AM
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

7 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 30 Mar 2015, 04:46 PM
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
0
Nick
Top achievements
Rank 1
answered on 01 Sep 2015, 11:03 AM
It will be extremely helpful if you can show us an example of how to do this.
0
Marin Bratanov
Telerik team
answered on 01 Sep 2015, 01:39 PM

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
0
Nick
Top achievements
Rank 1
answered on 01 Sep 2015, 02:05 PM
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'.
0
Marin Bratanov
Telerik team
answered on 01 Sep 2015, 02:20 PM

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
0
Nick
Top achievements
Rank 1
answered on 01 Sep 2015, 02:41 PM

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.

0
Marin Bratanov
Telerik team
answered on 01 Sep 2015, 03:06 PM

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
Tags
Map
Asked by
Ian
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Nick
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or