All docs
V21.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
20.2
20.1
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

jQuery Map - key Deprecated

Use the apiKey property 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.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.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: ''