Angular 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.
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 ], // ... })
Vue
<template> <DxMap :zoom="10" :center="centerCoordinates" width="100%" :height="500" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxMap } from 'devextreme-vue/map'; export default { components: { DxMap }, data() { return { centerCoordinates: { lat: 40.749825, lng: -73.987963 } }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Map } from 'devextreme-react/map'; const centerCoordinates = { lat: 40.749825, lng: -73.987963 }; class App extends React.Component { render() { return ( <Map defaultZoom={10} defaultCenter={centerCoordinates} width="100%" height={500} /> ); } } export default App;
If you prefer specifying the UI component size using CSS, set the width and height properties 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; }
Vue
App.vue
<template> <DxMap :zoom="10" :center="centerCoordinates" :width="null" :height="null" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxMap } from 'devextreme-vue/map'; export default { components: { DxMap }, data() { return { centerCoordinates: { lat: 40.749825, lng: -73.987963 } }; } } </script> <style> #mapContainer { width: 100%; height: 500px; } </style>
React
App.js
styles.css
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Map } from 'devextreme-react/map'; const centerCoordinates = { lat: 40.749825, lng: -73.987963 }; class App extends React.Component { render() { return ( <Map defaultZoom={10} defaultCenter={centerCoordinates} width={null} height={null} /> ); } } export default App;
#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.