Free Trial Buy

Specify the Provider and Type

By default, the Map widget 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 option.

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
    ],
    // ...
})

When using maps, you should include an API key that authenticates your application. Specify this key using the key option. Note that this option 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",
        key: {
            bing: BING_API_KEY,
            google: GOOGLE_API_KEY,
            googleStatic: GOOGLE_STATIC_API_KEY
        }
    });
});
Angular
HTML
TypeScript
<dx-map
    [center]="{ lat: 40.749825, lng: -73.987963 }"
    [zoom]="10"
    provider="bing"
    [key]="authentificationKeys">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    authentificationKeys = {
        bing: this.BING_API_KEY,
        google: this.GOOGLE_API_KEY,
        googleStatic: this.GOOGLE_STATIC_API_KEY
    }
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})

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

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
    ],
    // ...
})
See Also