JavaScript/jQuery Map - providerConfig
A provider configuration object.
Type:
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;
useAdvancedMarkers
Specifies whether to use advanced markers with the google
and googleStatic
providers.
Type:
Default Value: true
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.