All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Overview

The Map is an interactive UI component that displays a geographic map with markers and routes.

View Demo

The code below adds the Map UI component to your page. The Map is centered and zoomed and supplied with controls that allow a user to zoom and navigate the Map or change its type.

jQuery
HTML
JavaScript
<div id="mapContainer"></div>
$(function() {
    $("#mapContainer").dxMap({
        center: { lat: 40.749825, lng: -73.987963 },
        zoom: 10,
        controls: true
    });
});
Angular
HTML
TypeScript
<dx-map
    [center]="{ lat: 40.749825, lng: -73.987963 }"
    [controls]="true"
    [zoom]="10">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})
Vue
<template>
    <DxMap
        :zoom="10"
        :controls="true"
        :center="centerCoordinates"
    />
</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}
                controls={true}
                defaultCenter={centerCoordinates}
            />
        );
    }
}

export default App;
See Also