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 - Handle the Related Events

The Map widget fires the markerAdded and markerRemoved events when a marker is added or removed. To handle them, assign functions to the onMarkerAdded and onMarkerRemoved options, respectively.

jQuery
JavaScript
$(function() {
    $("#mapContainer").dxMap({
        center: { lat: 40.749825, lng: -73.987963 },
        zoom: 10,
        onMarkerAdded: function (e) {
            var addedMarker = e.options;
            // The original marker used by the current map provider 
            var originalMarker = e.originalMarker;
            // Event handling commands go here
        },
        onMarkerRemoved: function (e) {
            var removedMarker = e.options;
            // Event handling commands go here
        }
    });
});
Angular
HTML
TypeScript
<dx-map
    [center]="{ lat: 40.749825, lng: -73.987963 }"
    [zoom]="10"
    (onMarkerAdded)="markerAdded($event)"
    (onMarkerRemoved)="markerRemoved($event)">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    markerAdded (e) {
        let addedMarker = e.options;
        // The original marker used by the current map provider 
        let originalMarker = e.originalMarker;
        // Event handling commands go here
    };
    markerRemoved (e) {
        let removedMarker = e.options;
        // Event handling commands go here
    }
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})

If you are going to change event handlers at runtime, or if you need to attach several handlers to a single event, subscribe to the markerAdded and markerRemoved events using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

JavaScript
var markerRemovedHandler1 = function (e) {
    var removedMarker = e.options;
    // First handler of the "markerRemoved" event
};

var markerRemovedHandler2 = function (e) {
    var removedMarker = e.options;
    // Second handler of the "markerRemoved" event
};

$("#mapContainer").dxMap("instance")
    .on("markerRemoved", markerRemovedHandler1)
    .on("markerRemoved", markerRemovedHandler2);
See Also