A newer version of this page is available. Switch to the current version.

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