Configuration markers[]

An array of markers displayed on a map.

Type: Array

If you use the Knockout approach when working with the Map widget, you can pass an observable array to the markers option to easily manage markers.

View Demo

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-tabs="{
        dataSource: providers,
        onItemClick: tabClicked,
        selectedIndex: 1
    }"></div>
    <div dx-map="{
        markers: mapMarkers,
        zoom: 14,
        bindingOptions: {
            provider: 'currentProvider'
        }
    }"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.providers = ["bing", "google", "googleStatic"];
    $scope.currentProvider = "google";
    $scope.tabClicked = function(e){
        $scope.currentProvider = e.itemData;
    };
    $scope.mapMarkers = [{
        title: "A marker",
        tooltip: { text: "<p>The <b style=\"color: red;\">A</b> marker</p>", isShown: true },
        location: [40.749802, -73.981018],
        onClick: function () { DevExpress.ui.notify("Marker 'A' clicked!", "info", 1000); }
    },
    {
        title: "C marker",
        tooltip: "<p>The <b style=\"color: green;\">C</b> marker</p>",
        location: [40.755823, -73.986397],
        onClick: function () { DevExpress.ui.notify("Marker 'C' clicked!", "info", 1000); }
    },
    {
        title: "B marker",
        tooltip: "<p>The <b style=\"color: blue;\">B</b> marker</p>",
        location: [40.749825, -73.987963],
        onClick: function () { DevExpress.ui.notify("Marker 'B' clicked!", "info", 1000); }
    }];
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-map{
    margin: 10px;
    height: 370px;
}
<div data-bind="dxTabs: {
    dataSource: providers,
    onItemClick: tabClicked,
    selectedIndex: 1
}"></div>
<div data-bind="dxMap: {
    markers: mapMarkers,
    zoom: 14,
    provider: currentProvider
}"></div>
var myViewModel = {
    providers: ["bing", "google", "googleStatic"],
    currentProvider: ko.observable("google"),
    tabClicked: function(e){
        this.currentProvider(e.itemData);
    },
    mapMarkers: [{
        title: "A marker",
        tooltip: { text: "<p>The <b style=\"color: red;\">A</b> marker</p>", isShown: true },
        location: [40.749802, -73.981018],
        onClick: function () { DevExpress.ui.notify("Marker 'A' clicked!", "info", 1000); }
    },
    {
        title: "C marker",
        tooltip: "<p>The <b style=\"color: green;\">C</b> marker</p>",
        location: [40.755823, -73.986397],
        onClick: function () { DevExpress.ui.notify("Marker 'C' clicked!", "info", 1000); }
    },
    {
        title: "B marker",
        tooltip: "<p>The <b style=\"color: blue;\">B</b> marker</p>",
        location: [40.749825, -73.987963],
        onClick: function () { DevExpress.ui.notify("Marker 'B' clicked!", "info", 1000); }
    }]
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-map{
    margin: 10px;
    height: 370px;
}
<div id="providersTabs"></div>
<div id="myMap"></div>
$("#providersTabs").dxTabs({
    dataSource: ["bing", "google", "googleStatic"],
    selectedIndex: 1,
    onItemClick: function (e) {
        $("#myMap").dxMap("instance").option("provider", e.itemData);
    }
});
$("#myMap").dxMap({
    provider: "google",
    zoom: 14,
    markers: [{
        title: "A marker",
        tooltip: { text: "<p>The <b style=\"color: red;\">A</b> marker</p>", isShown: true },
        location: [40.749802, -73.981018],
        onClick: function () { DevExpress.ui.notify("Marker 'A' clicked!", "info", 1000); }
    },
    {
        title: "C marker",
        tooltip: "<p>The <b style=\"color: green;\">C</b> marker</p>",
        location: [40.755823, -73.986397],
        onClick: function () { DevExpress.ui.notify("Marker 'C' clicked!", "info", 1000); }
    },
    {
        title: "B marker",
        tooltip: "<p>The <b style=\"color: blue;\">B</b> marker</p>",
        location: [40.749825, -73.987963],
        onClick: function () { DevExpress.ui.notify("Marker 'B' clicked!", "info", 1000); }
    }]
});
body{
    text-align: center;
}
.dx-map{
    margin: 10px;
    height: 370px;
}

iconSrc

A URL pointing to the custom icon to be used for the marker.

Type: String

location

Specifies the marker location.

This value is specified in same format as the center option.

onClick

A callback function performed when the marker is clicked.

Type: function

tooltip

A tooltip to be used for the marker.

Type: String|Object

This option takes on an object containing the text and isShown fields. The text field specifies the tooltip text. The isShown field takes on a Boolean value that specifies whether a tooltip is visible by default or not. If the tooltip should be hidden by default, pass the tooltip text directly to the tooltip property.