Vue Map - apiKey

Keys to authenticate the component within map providers.

Selector: DxApiKey
Type:

String

|

Object

Default Value: { azure: '', bing: '', google: '', googleStatic: '' }

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.

app.component.html
app.component.ts
app.module.ts
  • <dx-map ... >
  • <dxo-api-key
  • azure="MY_AZURE_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 { }

View Demo

NOTE
The value of this property cannot be changed dynamically.

azure

A key used to authenticate the component within Azure Maps.

Type:

String

Default Value: ''

bing Deprecated

A key used to authenticate the component within Bing Maps.

Type:

String

Default Value: ''

google

A key used to authenticate the component within Google Maps.

Type:

String

Default Value: ''

googleStatic

A key used to authenticate the component within Google Maps Static.

Selector: google-static
Type:

String

Default Value: ''