Edit this page

Customize Markers on Map

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

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

        $("#map").unbind("mousewheel");
      }

      $(document).ready(createMap);
    </script>
    <style>
      .k-map .k-i-marker-custom-marker {
        background-image: url('https://demos.telerik.com/kendo-ui/content/shared/images/we-are-here.png');
        background-size: 50px;
        width: 50px;
        height: 50px;
      }
    </style>

See Also

For more runnable examples on the Kendo UI Map, browse the How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy