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

Markers

configuration

Static markers to display on the map.

markers

Array

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }],
        markers: [{
            location: [42, 27]
        }, {
            location: [40, 20]
        }]
    });
</script>

markers.location

Array|kendo.dataviz.map.Location

The marker location on the map. Coordinates are listed as [Latitude, Longitude].

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }],
        markerDefaults: {
            shape: "pin"
        },
        markers: [{
            location: [42, 27]
        }]
    });
</script>

markers.shape

String

The marker shape. The following pre-defined marker shapes are available:

pinTarget
pin

Marker shapes are implemented as CSS classes on the marker element (span.k-marker). For example "pinTarget" is rendered as "k-marker-pin-target".

Default: "pinTarget"

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }],
        markers: [{
            shape: "pin",
            location: [42, 27]
        }]
    });
</script>

markers.title

String

The marker title. Displayed as browser tooltip.

Default: "pinTarget"

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }],
        markers: [{
            shape: "pin",
            location: [0, 0],
            title: "POI"
        }]
    });
</script>

markers.tooltip

Object

Kendo UI Tooltip options for this marker.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }],
        markers: [{
            location: [42.6977, 23.3219],
            tooltip: {
                autoHide: false,
                content: "Sofia, Bulgaria - Capital city",
                position: "top",
                showOn: "click"
            }
        }]
    });
</script>