DevExtreme Vue - Specify the Size

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

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
    ],
    // ...
})

If you prefer specifying the widget size using CSS, set the width and height options 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;
}
See Also