Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/UI_Components/dxMap/Configuration/apiKey/ below:

Vue Map - apiKey | Vue Documentation

Keys to authenticate the component within map providers.

Selector: DxApiKey

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.

$(function() {
    $("#mapContainer").dxMap({
        // ...
        apiKey: {
            azure: "MY_AZURE_MAPS_KEY",
            google: "MY_GOOGLE_MAPS_KEY",
            googleStatic: "MY_GOOGLE_STATIC_MAPS_KEY"
        }
    });
});

<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 { }

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

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

The value of this property cannot be changed dynamically.

A key used to authenticate the component within Azure Maps.

A key used to authenticate the component within Bing Maps.

A key used to authenticate the component within Google Maps.

A key used to authenticate the component within Google Maps Static.

Selector: google-static

Default Value: ''

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4