New to Kendo UI for jQuery? Download free 30-day trial

Customize the Markers on a Map


Product Progress® Kendo UI® Map for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I customize the markers of the Kendo UI for jQuery Map?


The following example demonstrates how to use custom markers on a Kendo UI Map.

    <div id="map"></div>
        function createMap() {
          center: [30.268107, -97.744821],
          zoom: 3,
          layers: [{
            type: "tile",
            urlTemplate: "http://#= subdomain zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"],
            attribution: "&copy; <a href=''>OpenStreetMap contributors</a>"
          markers: [{
            location: [30.268107, -97.744821],
            shape: "customMarker",
            tooltip: {
              content: "Austin, TX"


      .k-map .k-i-marker-custom-marker {
        background-image: url('');
        background-size: 30px;
        width: 30px;
        height: 30px;

See Also

In this article