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

MarkerDefaults

configuration

The default options for all markers.

markerDefaults

Object

<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]
        }, {
            location: [40, 20]
        }]
    });
</script>

markerDefaults.shape

String

The default 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"
        }],
        markerDefaults: {
            shape: "pin"
        },
        markers: [{
            location: [42, 27]
        }, {
            location: [40, 20]
        }]
    });
</script>

markerDefaults.tooltip

Object

Default Kendo UI Tooltip options for this marker.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        markerDefaults: {
            tooltip: {
                autoHide: false,
                template: (data) => `<strong>${data.title || 'Marker'}</strong><br/>Location: ${data.location}`,
                position: "bottom",
                showOn: "click"
            }
        },
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }]
    });
</script>

MarkerDefaults

markerDefaults

markerDefaults.shape

markerDefaults.tooltip

Related Members