Angular Map - 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