Vue Map - providerConfig

A provider configuration object.

Selector: DxProviderConfig
Type:

Object

Default Value: { mapId: '', useAdvancedMarkers: true }
jQuery
index.js
$(function () {
    $("#map").dxMap({
        apiKey: "YOUR_API_KEY",
        provider: "google",
        providerConfig: {
            mapId: "YOUR_GOOGLE_MAP_ID"
        }
    });
});
Angular
app.component.html
app.module.ts
<dx-map ... 
    provider="google"
    apiKey="YOUR_API_KEY"
>
    <dxo-provider-config
        mapId="YOUR_GOOGLE_MAP_ID"
    >
    </dxo-provider-config>
</dx-map>
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 ... 
        provider="google"
        api-key="YOUR_API_KEY"
    >
        <DxProviderConfig 
            map-id="YOUR_GOOGLE_MAP_ID"
        />
    </DxMap>
</template>

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

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

export default {
    components: {
        DxMap,
        DxProviderConfig
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const App = () => {
    return (
        <Map ... 
            provider="google"
            apiKey="YOUR_API_KEY"
        >
            <ProviderConfig 
                mapId="YOUR_GOOGLE_MAP_ID"
            />
        </Map>
    );
}
export default App;

mapId

Specifies a map ID for the google and googleStatic providers.

Selector: map-id
Type:

String

Default Value: ''

This property is required if you use markers.

useAdvancedMarkers Deprecated

Specifies whether to use advanced markers with the google and googleStatic providers.

Selector: use-advanced-markers
Type:

Boolean

Default Value: true