DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy

Specify the Provider and Type

By default, the Map UI component uses Google Maps as a map provider. It can use Bing Maps or Google Static Maps instead. To change the provider, assign one of the values listed below to the provider property.

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

export default App;

When using maps, you should include an API key that authenticates your application. Specify this key using the apiKey property. Note that this property can also accept an object with keys for every available provider. For more information on API keys, refer to the documentation of the specific map provider.

jQuery
JavaScript
$(function() {
    $("#mapContainer").dxMap({
        center: { lat: 40.749825, lng: -73.987963 },
        zoom: 10,
        provider: "bing",
        apiKey: {
            bing: "YOUR_BING_MAPS_API_KEY",
            google: "YOUR_GOOGLE_MAPS_API_KEY",
            googleStatic: "YOUR_GOOGLE_STATIC_MAPS_API_KEY"
        }
    });
});
Angular
HTML
TypeScript
<dx-map
    [center]="{ lat: 40.749825, lng: -73.987963 }"
    [zoom]="10"
    provider="bing"
    [apiKey]="authentificationKeys">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    authentificationKeys = {
        bing: "YOUR_BING_MAPS_API_KEY",
        google: "YOUR_GOOGLE_MAPS_API_KEY",
        googleStatic: "YOUR_GOOGLE_STATIC_MAPS_API_KEY"
    }
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})
Vue
<template>
    <DxMap
        :zoom="10"
        :center="centerCoordinates"
        provider="bing"
        :apiKey="authentificationKeys"
    />
</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 },
            authentificationKeys: {
                bing: "YOUR_BING_MAPS_API_KEY",
                google: "YOUR_GOOGLE_MAPS_API_KEY",
                googleStatic: "YOUR_GOOGLE_STATIC_MAPS_API_KEY"
            }
        };
    }
}
</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 };
const authentificationKeys = {
    bing: "YOUR_BING_MAPS_API_KEY",
    google: "YOUR_GOOGLE_MAPS_API_KEY",
    googleStatic: "YOUR_GOOGLE_STATIC_MAPS_API_KEY"
};

class App extends React.Component {
    render() {
        return (
            <Map
                defaultZoom={10}
                defaultCenter={centerCoordinates}
                provider="bing"
                apiKey={authentificationKeys}
            />
        );
    }
}

export default App;

The Map UI component supports the following map types: "hybrid", "satellite" and "roadmap", which is used by default. To change the map type, use the type property. Note that Bing Maps call map types differ​ently​​, therefore Aerial and Road Bing Maps became "hybrid" and "roadmap", respectively, in the Map UI component.

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

export default App;
See Also