Angular Map - apiKey

Keys to authenticate the component within map providers.

Selector: dxo-api-key

Type:

|

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.