Vue 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.

  • <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>

View Demo

To add or remove a marker at runtime, bind the markers property of the Map to a component property:

  • <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>
See Also