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.
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.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.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.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.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
Feedback