All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

key Deprecated

Use the apiKey option instead.

A key used to authenticate the application within the required map provider.

Type:

String

|

Object

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

jQuery
index.js
$(function() {
    $("#mapContainer").dxMap({
        // ...
        key: {
            bing: "MY_BING_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-key
        bing="MY_BING_MAPS_KEY"
        google="MY_GOOGLE_MAPS_KEY"
        googleStatic="MY_GOOGLE_STATIC_MAPS_KEY">
    </dxo-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 ... >
        <DxKey
            bing="MY_BING_MAPS_KEY"
            google="MY_GOOGLE_MAPS_KEY"
            googleStatic="MY_GOOGLE_STATIC_MAPS_KEY"
        />
    </DxMap>
</template>

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

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

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

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

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

class App extends React.Component {
    render() {
        return (
            <Map ... >
                <Key
                    bing="MY_BING_MAPS_KEY"
                    google="MY_GOOGLE_MAPS_KEY"
                    googleStatic="MY_GOOGLE_STATIC_MAPS_KEY"
                />
            </Map>
        );
    }
}
export default App;
NOTE
The value of this property cannot be changed dynamically.

bing

A key used to authenticate the application within the "Bing" map provider.

Type:

String

Default Value: ''

google

A key used to authenticate the application within the "Google" map provider.

Type:

String

Default Value: ''

googleStatic

A key used to authenticate the application within the "Google Static" map provider.

Type:

String

Default Value: ''