All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - 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