DevExtreme Angular - 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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.