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

jQuery Map - Add and Remove

To add markers at design-time, pass an array of objects to the markers property. 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
    ],
    // ...
})
Vue
<template>
    <DxMap
        :zoom="5"
        :markers="mapMarkers"
    />
</template>

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

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

export default {
    components: {
        DxMap
    },
    data() {
        return {
            mapMarkers: [
                { location: "40.749825, -73.090443" },
                { location: "42.743244, -71.594375" },
                { location: "37.058435, -74.903842" }
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const mapMarkers = [
    { location: "40.749825, -73.090443" },
    { location: "42.743244, -71.594375" },
    { location: "37.058435, -74.903842" }
];

class App extends React.Component {
    render() {
        return (
            <Map
                defaultZoom={5}
                markers={mapMarkers}
            />
        );
    }
}

export default App;

View Demo

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

JavaScript
const 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() {
    const 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 () {
            const markers = map.option("markers");
            const markerCount = markers.length;
            if (markerCount < 1)
                return;
            // Removes the last marker
            map.removeMarker(markers[markerCount - 1]);
        }
    });
});

With Angular, Vue, or React, use a different technique. Bind the markers property of the Map UI component to a component property.

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
    ],
    // ...
})
Vue
<template>
    <div>
        <DxMap
            :zoom="10"
            :markers="mapMarkers"
            @click="addMarker"
        />
        <DxButton
            text="Remove the Last Marker"
            @click="removeMarker"
        />
    </div>
</template>

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

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

export default {
    components: {
        DxMap,
        DxButton
    },
    data() {
        return {
            mapMarkers: [
                { location: "40.749825, -73.090443" },
                { location: "42.743244, -71.594375" }
            ]
        };
    },
    methods: {
        addMarker(e) {
            this.mapMarkers.push({ location: e.location });
        },
        removeMarker() {
            this.mapMarkers.pop();
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

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

        this.state = {
            mapMarkers: [
                { location: "40.749825, -73.090443" },
                { location: "42.743244, -71.594375" }
            ]
        };

        this.addMarker = this.addMarker.bind(this);
        this.removeMarker = this.removeMarker.bind(this);
    }

    addMarker() {
        this.state.mapMarkers.push({ location: e.location });
    }

    removeMarker() {
        this.state.mapMarkers.pop();
    }

    render() {
        return (
            <div>
                <Map
                    defaultZoom={10}
                    markers={this.state.mapMarkers}
                    onClick={this.addMarker}
                />
                <Button
                    text="Remove the Last Marker"
                    onClick={this.removeMarker}
                />
            </div>
        );
    }
}

export default App;
See Also