JavaScript/jQuery Map - apiKey

Keys to authenticate the component within map providers.

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-map-api-key
        azure="MY_AZURE_MAPS_KEY"
        google="MY_GOOGLE_MAPS_KEY"
        googleStatic="MY_GOOGLE_STATIC_MAPS_KEY">
    </dxo-map-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.fluent.blue.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.fluent.blue.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.

If provider is "osm", the Map ignores apiKey. Include credentials that your tile, geocoding, and routing services require in the tile URL template or in providerConfig function requests.

See Also

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: ''