Map

An interactive map widget.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

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

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxMap widget using the Knockout approach.

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

Specify the value of the center 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 center 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'

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

See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
Show Example:
jQuery

Configuration

An object defining configuration options for the dxMap widget.

Methods

This section describes members used to manipulate a widget.

Events

This section describes events fired by this component.