Vue Map - providerConfig

A provider configuration object.

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-map-provider-config
        mapId="YOUR_GOOGLE_MAP_ID"
    >
    </dxo-map-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.fluent.blue.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.fluent.blue.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;

calculateLocation

Converts an address or place name to coordinates if provider is "osm".

Type:

Function

Function parameters:
query:

String

The address or place name to convert.

Return Value: PromiseLike

A promise that resolves with a MapLocation object or undefined if the location is not found.

The Map does not include a geocoding service. Implement this function to request coordinates from an external geocoding service. The Map calls this function when the following properties contain location strings instead of coordinates:

The component caches coordinates for each location string.

See Also

calculateRoute

Calculates route geometry if provider is "osm".

Type:

Function

Function parameters:
params:

CalculateOsmRouteInfo

Information about the route to calculate.

Return Value: PromiseLike

A promise that resolves with the route geometry (OsmRouteResult).

The Map does not include a routing service. Implement this function to return route geometry from an external routing service or from predefined coordinates. The Map calls this function for each routes[] item that contains two or more locations. The Map converts locations specified as strings or arrays to MapLocation objects before the component calls calculateRoute.

The Map does not display route geometry in the following instances:

  • calculateRoute is not specified
  • The Map cannot convert a route location to coordinates
  • The promise is rejected or resolves with an invalid OsmRouteResult value
See Also

mapId

Specifies a map ID for the google and googleStatic providers.

Type:

String

Default Value: ''

This property is required if you use markers.

tileServer

Specifies the tile source if provider is "osm".

Type:

OsmTileServer

| undefined
Default Value: undefined

The Map does not include a tile source. Specify tileServer to display map tiles. Assign one of the following values to this property:

See Also

useAdvancedMarkers Deprecated

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

Type:

Boolean

Default Value: true