All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Add and Remove

To add markers at design-time, pass an array of objects to the markers option. A marker requires only its location to be specified.

jQuery
JavaScript
$(function() {
    $("#mapContainer").dxMap({
        zoom: 5,
        markers: [
            { location: "40.749825, -73.090443" },
            { location: "42.743244, -71.594375" },
            { location: "37.058435, -74.903842" }
        ]
    });
});
Angular
HTML
TypeScript
<dx-map
    [zoom]="5"
    [markers]="mapMarkers">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    mapMarkers = [
        { location: "40.749825, -73.090443" },
        { location: "42.743244, -71.594375" },
        { location: "37.058435, -74.903842" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})

View Demo

To add or remove a marker at runtime, call the addMarker(markerOptions) or removeMarker(marker) method.

JavaScript
var markersCollection = [
    { location: "40.749825, -73.090443" },
    { location: "42.743244, -71.594375", tooltip: { isShown: true } }
];

// Adds a marker
map.addMarker(markersCollection[0]);

// Adds several markers
map.addMarker(markersCollection);

// Removes the marker with specific configuration
map.removeMarker(markersCollection[1]);

// Removes the marker with index 2 in the "markers" array
map.removeMarker(2);

// Removes the markers with specific configurations
map.removeMarker(markersCollection);

// Removes the markers with indexes 0 and 4 in the "markers" array
map.removeMarker([0, 4]);

In the following code, a marker is added each time a user clicks someplace on the Map. The last marker from the markers array is removed when the user clicks the Button under the Map.

JavaScript
$(function() {
    var map = $("#mapContainer").dxMap({
        center: { lat: 40.749825, lng: -73.987963 },
        zoom: 10,
        onClick: function (e) {
            e.component.addMarker({
                // Location of the clicked point on the map
                location: e.location
            });
        }
    }).dxMap("instance");

    $("#removeMarker").dxButton({
        text: "Remove the Last Marker",
        onClick: function () {
            var markers = map.option("markers");
            var markerCount = markers.length;
            if (markerCount < 1)
                return;
            // Removes the last marker
            map.removeMarker(markers[markerCount - 1]);
        }
    });
});

With Angular, AngularJS, or Knockout, use a different technique. Bind the markers option of the Map widget to a component property (in Angular), a scope property (in AngularJS) or an observable array (in Knockout).

Angular
HTML
TypeScript
<dx-map
    [zoom]="10"
    [markers]="mapMarkers"
    (onClick)="addMarker($event)">
</dx-map>
<dx-button
    text="Remove the Last Marker"
    (onClick)="removeMarker()">
</dx-button>
import { DxMapModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    mapMarkers = [
        { location: "40.749825, -73.090443" },
        { location: "42.743244, -71.594375" }
    ];
    addMarker (e) {
        this.mapMarkers.push({ location: e.location });
    };
    removeMarker () {
        this.mapMarkers.pop();
    }
}
@NgModule({
    imports: [
        // ...
        DxMapModule,
        DxButtonModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-map="{
        zoom: 10,
        onClick: addMarker,
        bindingOptions: {
            markers: 'mapMarkers'
        }
    }"></div>
    <div dx-button="{
        text: 'Remove the Last Marker',
        onClick: removeMarker
    }"></div>
</div>
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.mapMarkers = [
            { location: "40.749825, -73.090443" },
            { location: "42.743244, -71.594375" }
        ];
        $scope.addMarker = function (e) {
            $scope.mapMarkers.push({ location: e.location });
        }
        $scope.removeMarker = function () {
            $scope.mapMarkers.pop();
        };
    });
Knockout
HTML
JavaScript
<div data-bind="dxMap: { 
    zoom: 10,
    onClick: addMarker,
    markers: mapMarkers 
}"></div>
<div data-bind="dxButton: {
    text: 'Remove the Last Marker',
    onClick: removeMarker
}"></div>
var viewModel = {
    mapMarkers: ko.observableArray([
        { location: "40.749825, -73.090443" },
        { location: "42.743244, -71.594375" }
    ]),
    addMarker: function (e) {
        viewModel.mapMarkers.push({ location: e.location });
    },
    removeMarker: function () {
        viewModel.mapMarkers.pop();
    }
};

ko.applyBindings(viewModel);
See Also