Angular Map - apiKey

Keys to authenticate the component within map providers.

Selector: dxo-api-key
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.

jQuery
index.js
$(function() {
    $("#mapContainer").dxMap({
        // ...
        apiKey: {
            azure: "MY_AZURE_MAPS_KEY",
            google: "MY_GOOGLE_MAPS_KEY",
            googleStatic: "MY_GOOGLE_STATIC_MAPS_KEY"
        }
    });
});
Angular
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 { }
Vue
App.vue
<template>
    <DxMap ... >
        <DxApiKey
            azure="MY_AZURE_MAPS_KEY"
            google="MY_GOOGLE_MAPS_KEY"
            googleStatic="MY_GOOGLE_STATIC_MAPS_KEY"
        />
    </DxMap>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxMap, {
    DxApiKey
} from 'devextreme-vue/map';

export default {
    components: {
        DxMap,
        DxApiKey
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Map, {
    ApiKey
} from 'devextreme-react/map';

const App = () => {
    return (
        <Map ... >
            <ApiKey
                azure="MY_AZURE_MAPS_KEY"
                google="MY_GOOGLE_MAPS_KEY"
                googleStatic="MY_GOOGLE_STATIC_MAPS_KEY"
            />
        </Map>
    );
}
export default App;

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.

Type:

String

Default Value: ''