JavaScript/jQuery 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.

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 UI component size using CSS, set the width and height properties to null.

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