Your search did not match any results.
Map

Providers and Types

API Reference
The dxMap widget supports Bing and Google map providers. Use the "provider" option to specify the required map provider. Each map provider supports similar map types, but type names are different. The dxMap widget includes a "type" option that accepts "hybrid", "satellite" and "roadmap" values. These values are based on Google map types. If you are using the Bing map provider, the widget automatically maps option values.
Copy to Codepen
Apply
Reset
$(function(){ var mapProviders = [{ key: "google", name: "Google Dynamic Map" }, { key: "googleStatic", name: "Google Static Map" }, { key: "bing", name: "Bing Map" }]; var mapTypes = [{ key: "roadmap", name: "Default Map" }, { key: "satellite", name: "Photographic Map" }, { key: "hybrid", name: "Hybrid Map" }]; var map = $("#map").dxMap({ center: "Brooklyn Bridge,New York,NY", zoom: 14, height: 400, width: "100%", provider: mapProviders[0].key, type: mapTypes[0].key }).dxMap("instance"); $("#choose-provider").dxSelectBox({ dataSource: mapProviders, displayExpr: "name", valueExpr: "key", value: mapProviders[0].key, onValueChanged: function (data) { map.option("provider", data.value); } }); $("#choose-type").dxSelectBox({ dataSource: mapTypes, displayExpr: "name", valueExpr: "key", value: mapTypes[0].key, onValueChanged: function (data) { map.option("type", data.value); } }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="dx-fieldset options"> <div class="dx-field"> <div class="dx-field-label">Map Provider</div> <div class="dx-field-value"> <div id="choose-provider"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Map Type</div> <div class="dx-field-value"> <div id="choose-type"></div> </div> </div> </div> <div id="map"></div> </div> </body> </html>
.options { max-width: 385px; }