If you have more than one map provider in your application, specify the keys in the object fields as shown below. Otherwise, you can assign the key directly to the apiKey property.
- $(function() {
- $("#mapContainer").dxMap({
- // ...
- apiKey: {
- bing: "MY_BING_MAPS_KEY",
- google: "MY_GOOGLE_MAPS_KEY",
- googleStatic: "MY_GOOGLE_STATIC_MAPS_KEY"
- }
- });
- });
- <dx-map ... >
- <dxo-api-key
- bing="MY_BING_MAPS_KEY"
- google="MY_GOOGLE_MAPS_KEY"
- googleStatic="MY_GOOGLE_STATIC_MAPS_KEY">
- </dxo-api-key>
- </dx-map>
- import { Component } from '@angular/core';
-
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent { }
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
-
- import { DxMapModule } from 'devextreme-angular';
-
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- DxMapModule
- ],
- providers: [ ],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
The value of this property cannot be changed dynamically.