Your search did not match any results.
Map

Providers and Types

Documentation
By default, the Map widget uses Google Maps as a map provider. It can use Bing Maps or Google Static Maps instead. You can change the provider using the provider option.

In addition, the Map widget supports the following map types: "hybrid", "satellite" and "roadmap", which is used by default. To change the map type, use the type option.
Copy to CodePen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { var mapProviders = [{ key: "google", name: "Google Dynamic Map" }, { key: "googleStatic", name: "Google Static Map" }, { key: "bing", name: "Bing Map" }], mapTypes = [{ key: "roadmap", name: "Default Map" }, { key: "satellite", name: "Photographic Map" }, { key: "hybrid", name: "Hybrid Map" }]; $scope.provider = mapProviders[0].key; $scope.type = mapTypes[0].key; $scope.mapOptions = { center: "Brooklyn Bridge,New York,NY", zoom: 14, height: 400, width: "100%", bindingOptions: { provider: "provider", type: "type" } }; $scope.chooseProviderOptions = { dataSource: mapProviders, displayExpr: "name", valueExpr: "key", bindingOptions: { value: "provider" } }; $scope.chooseTypeOptions = { dataSource: mapTypes, displayExpr: "name", valueExpr: "key", bindingOptions: { value: "type" } }; });
<!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/17.1.7/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.win10.white.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/17.1.7/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" ng-app="DemoApp" ng-controller="DemoController"> <div dx-map="mapOptions"></div> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Map Provider</span> <div dx-select-box="chooseProviderOptions"></div> </div> <div class="option"> <span>Map Type</span> <div dx-select-box="chooseTypeOptions"></div> </div> </div> </div> </body> </html>
.options { padding: 20px; background-color: #f5f5f5; margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } .option > span { display: inline-block; width: 100px; } .option > .dx-selectbox { width: 100%; max-width: 350px; display: inline-block; vertical-align: middle; }