Markers

To define the marker collection of the Map, use the kendo-map-marker component.

<div id="vueapp" class="vue-app">
    <kendo-map :center="[30.268107, -97.744821]"
               :zoom="5"
               style="width: 100%; height: 500px;">
        <kendo-map-layer :type="'tile'"
                         :url-template="'https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png'"
                         :subdomains="['a', 'b', 'c']"
                         :attribution="'&copy; <a href=\'https://osm.org/copyright\'>OpenStreetMap contributors</a>'">
        </kendo-map-layer>
        <kendo-map-marker :location="[30.268107, -97.744821]"
                          :shape="'pin'"
                          :title="'My Marker'">
        </kendo-map-marker>
        <kendo-map-marker :location="[32, -97.744821]"
                          :shape="'pinTarget'"
                          :tooltip-auto-hide="false"
                          :tooltip-content="'You can also change the content!'">
        </kendo-map-marker>
        <kendo-map-marker :location="[34, -97.744821]"></kendo-map-marker>
    </kendo-map>
</div>
Vue.use(MapInstaller);

new Vue({
    el: '#vueapp'
})

In this article