All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Handle the Related Events

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

jQuery
JavaScript
$(function() {
    $("#mapContainer").dxMap({
        center: { lat: 40.749825, lng: -73.987963 },
        zoom: 10,
        onMarkerAdded: function (e) {
            const addedMarker = e.options;
            // The original marker used by the current map provider 
            const originalMarker = e.originalMarker;
            // Event handling commands go here
        },
        onMarkerRemoved: function (e) {
            const 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) {
        const addedMarker = e.options;
        // The original marker used by the current map provider 
        const originalMarker = e.originalMarker;
        // Event handling commands go here
    };
    markerRemoved (e) {
        const removedMarker = e.options;
        // Event handling commands go here
    }
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})
Vue
<template>
    <DxMap
        :zoom="10"
        :center="centerCoordinates"
        @marker-added="markerAdded"
        @marker-removed="markerRemoved"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxMap } from 'devextreme-vue/map';

export default {
    components: {
        DxMap
    },
    data() {
        return {
            centerCoordinates: { lat: 40.749825, lng: -73.987963 }
        };
    },
    methods: {
        markerAdded(e) {
            const addedMarker = e.options;
            // The original marker used by the current map provider 
            const originalMarker = e.originalMarker;
            // Event handling commands go here
        },
        markerRemoved(e) {
            const removedMarker = e.options;
            // Event handling commands go here
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Map } from 'devextreme-react/map';

const centerCoordinates = { lat: 40.749825, lng: -73.987963 };

class App extends React.Component {
    constructor(props) {
        super(props);

        this.markerAdded = this.markerAdded.bind(this);
        this.markerRemoved = this.markerRemoved.bind(this);
    }

    markerAdded(e) {
        const addedMarker = e.options;
        // The original marker used by the current map provider 
        const originalMarker = e.originalMarker;
        // Event handling commands go here
    }

    markerRemoved(e) {
        const removedMarker = e.options;
        // Event handling commands go here
    }

    render() {
        return (
            <Map
                defaultZoom={10}
                defaultCenter={centerCoordinates}
                onMarkerAdded={this.markerAdded}
                onMarkerRemoved={this.markerRemoved}
            />
        );
    }
}

export default App;

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
const markerRemovedHandler1 = function (e) {
    const removedMarker = e.options;
    // First handler of the "markerRemoved" event
};

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

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