UI Widgets Map

An interactive map widget.

Type: Object

The dxMap widget represents an interactive map. The widget displays the map at a specified location using the specified zoom level. It also enables you to add markers and routes.

Specify the value of the location configuration option to show the required location at the center of the widget, and adjust the map scale using the zoom option. You can specify the location option value using one of the following formats.

  • { lat: 40.749825, lng: -73.987963}
  • "40.749825, -73.987963"
  • [40.749825, -73.987963]
  • 'Brooklyn Bridge,New York,NY'

To create a dxMap widget, add a div element with dxMap Knockout binding within the body of the required view.

HTML
<div data-bind="dxMap:{location:'Brooklyn Bridge,New York,NY'}"></div>

NOTE: If you use the dxMap widget in a Windows 8 application, you should have the Bing Maps SDK for Windows Store apps installed and the project should contain a reference to the Bing Maps for JavaScript library. See Bing maps documentation for details.

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:
jQuery
<div data-bind="dxMap:options"></div>
options = {
  location: "40.749825, -73.987963",
  width: 320,
  height: 320,
  zoom: 13,
  provider: "google",
  mapType: "satellite",
  markers: [
    { title: "A", location: [40.737102, -73.990318] },
    { title: "B", location: [40.749825, -73.987963] },
    { title: "С", location: [40.755823, -73.986397] }
  ],
  routes: [{
    weight: 5,
    color: "blue",
    locations: [
      [40.737102, -73.990318],
      [40.749825, -73.987963],
      [40.755823, -73.986397]
    ]
  }]
};

Configuration

An object defining configuration options for the dxMap widget.

Methods

This section describes members used to manipulate a widget.