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.

jQuery
JavaScript
$(function() {
    $("#mapContainer").dxMap({
        center: { lat: 40.749825, lng: -73.987963 },
        zoom: 10,
        width: '100%',
        height: 500
    });
});
Angular
HTML
TypeScript
<dx-map
    [center]="{ lat: 40.749825, lng: -73.987963 }"
    [zoom]="10"
    width="100%"
    [height]="500">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})
Vue
<template>
    <DxMap
        :zoom="10"
        :center="centerCoordinates"
        width="100%"
        :height="500"
    />
</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 }
        };
    }
}
</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 {
    render() {
        return (
            <Map
                defaultZoom={10}
                defaultCenter={centerCoordinates}
                width="100%"
                height={500}
            />
        );
    }
}

export default App;

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

jQuery
JavaScript
CSS
$(function() {
    $("#mapContainer").dxMap({
        center: { lat: 40.749825, lng: -73.987963 },
        zoom: 10,
        width: null,
        height: null
    });
});
#mapContainer {
    width: 100%;
    height: 500px;
}
Angular
HTML
TypeScript
CSS
<dx-map id="mapContainer"
    [center]="{ lat: 40.749825, lng: -73.987963 }"
    [zoom]="10"
    [width]="null"
    [height]="null">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})
#mapContainer {
    width: 100%;
    height: 500px;
}
Vue
App.vue
<template>
    <DxMap
        :zoom="10"
        :center="centerCoordinates"
        :width="null"
        :height="null"
    />
</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 }
        };
    }
}
</script>

<style>
#mapContainer {
    width: 100%;
    height: 500px;
}
</style>
React
App.js
styles.css
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 {
    render() {
        return (
            <Map
                defaultZoom={10}
                defaultCenter={centerCoordinates}
                width={null}
                height={null}
            />
        );
    }
}

export default App;
#mapContainer {
    width: 100%;
    height: 500px;
}
See Also