Vue Map - Specify the Size

The default size of the Map UI component is 300x300 pixels. To change it, use to the width and height properties.

  • <template>
  • <DxMap
  • :zoom="10"
  • :center="centerCoordinates"
  • width="100%"
  • :height="500"
  • />
  • </template>
  •  
  • <script>
  • 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 }
  • };
  • }
  • }
  • </script>

If you prefer specifying the UI component size using CSS, set the width and height properties to null.

App.vue
  • <template>
  • <DxMap
  • :zoom="10"
  • :center="centerCoordinates"
  • :width="null"
  • :height="null"
  • />
  • </template>
  •  
  • <script>
  • 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 }
  • };
  • }
  • }
  • </script>
  •  
  • <style>
  • #mapContainer {
  • width: 100%;
  • height: 500px;
  • }
  • </style>
See Also