Content Custom Marker, use in codeBehind

2 posts, 0 answers
  1. Naografix
    Naografix avatar
    13 posts
    Member since:
    Jan 2015

    Posted 09 Jan 2015 Link to this post


    I want to use your sample Marker to create mine.

    I use your javascript file :

    (function(global, undefined) {
        function OnMarkerCreated(e) {
            var marker = e.marker,
                tooltip = marker.options.tooltip,
                countryFlag =,
                newTemplate = tooltip.template;
            countryFlag = countryFlag.replace(/\s/g, "");
            newTemplate = newTemplate.replace(/class='flag'/i, "class='flag flag-" + countryFlag + "'");
            tooltip.template = newTemplate;
            // The following custom functionality is built due to design decision that tooltips with autoHide="false"
            // should hide previously opened tooltips.
            setTimeout(function () {
            }, 0);
        function addShowHandler(marker) {
            var tooltip = marker.element.getKendoTooltip();
            tooltip.bind("show", hideAllNonValidPopups);
        function hideAllNonValidPopups(e) {
            var shownPopup = e.sender.popup.element[0],
                $ = $telerik.$,
                tooltipCollection = $(".k-tooltip");
            tooltipCollection.each(function () {
                var that = this;
                if (that != shownPopup) {
        global.OnMarkerCreated = OnMarkerCreated;

    And your Default.aspx

    <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
            <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
                        <Select DataType="JSON" Url="JSON/MarkersData.json" />
            <div class="demo-container size-auto">
                <h2 class="mapTitle">TELERIK OFFICES</h2>
                <telerik:RadMap runat="server" ID="RadMap1" Zoom="2" CssClass="MyMap" LayersDataSourceID="">
                    <CenterSettings Latitude="23" Longitude="10" />
                        <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                            UrlTemplate="http://#= subdomain zoom #/#= x #/#= y #.png"
                            Attribution="© <a href='' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
                        <telerik:MapLayer Type="Marker" Shape="PinTarget" ClientDataSourceID="RadClientDataSource1" LocationField="location">
                            <TooltipSettings AutoHide="false" Width="300"
                                Template="<div class='leftCol'><div class='flag'></div></div><div class='rightCol'><div class='country'>#= #</div><div class='city'>#= #</div><div class='address'>#= marker.dataItem.address #</div><div class='address'>#= marker.dataItem.address2 #</div><div class='phone'>p #= #</div><div class='email'>e <a href='mailto:#= #'>#= #</a></div><div class='location'>Location:#= #, #= location.lng #</div></div>">
                                    <OpenSettings Duration="300" Effects="fade:in" />
                                    <CloseSettings Duration="300" Effects="fade:out" />
                    <ClientEvents OnMarkerCreated="OnMarkerCreated" />
                <div id="contactsContainer">

    Now i want to create my PinMarker in my codeBiehind, like this :
    protected void Page_Load(object sender, EventArgs e)
           MapMarker myMarker = new MapMarker();
           myMarker.Shape = MarkerShape.PinTarget.ToString();
           myMarker.Title = "Test";
           myMarker.LocationSettings.Latitude = 0;
           myMarker.LocationSettings.Longitude = 0;

    And now, how can I put the template of your ToolTipSetting etc on my PinTarget ?

    But look, this is my result :

    Can you help me ?

  2. Ianko
    Ianko avatar
    1828 posts

    Posted 13 Jan 2015 Link to this post


    The code described is relevant when client-side data binding is used. Although, using the MarkersCollection collection is rather related to server-side data binding and I can suggest examining this online demo - Map - DataSet.

Back to Top