Your search did not match any results.

Providers and Types

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.
<div class="dx-fieldset options"> <div class="dx-field"> <div class="dx-field-label">Map Provider</div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBox() .ID("choose-provider") .DataSource(new[] { new { key = GeoMapProvider.Google, name = "Google Dynamic Map" }, new { key = GeoMapProvider.GoogleStatic, name = "Google Static Map" }, new { key = GeoMapProvider.Bing, name = "Bing Map" } }) .DisplayExpr("name") .ValueExpr("key") .Value(GeoMapProvider.Google) .OnValueChanged("selectBoxChooseProvider_onValueChanged") ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Map Type</div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBox() .ID("choose-type") .DataSource(new[] { new { key = GeoMapType.Roadmap, name = "Default Map" }, new { key = GeoMapType.Satellite, name = "Photographic Map" }, new { key= GeoMapType.Hybrid, name= "Hybrid Map" } }) .DisplayExpr("name") .ValueExpr("key") .Value(GeoMapType.Roadmap) .OnValueChanged("selectBoxChooseType_onValueChanged") ) </div> </div> </div> @(Html.DevExtreme().Map() .Key(k => k .Google("AIzaSyDk2m6n8ICK7FSmTHBLlapAWF3epiDdkHE") .GoogleStatic("AIzaSyDk2m6n8ICK7FSmTHBLlapAWF3epiDdkHE")) .ID("map") .Center("Brooklyn Bridge,New York,NY") .Zoom(14) .Height(400) .Width("100%") .Provider(GeoMapProvider.Google) .Type(GeoMapType.Roadmap) ) <script> function selectBoxChooseProvider_onValueChanged(data) { $("#map").dxMap("instance").option("provider", data.value); } function selectBoxChooseType_onValueChanged(data) { $("#map").dxMap("instance").option("type", data.value); } </script>
using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class MapController : Controller { public ActionResult ProvidersAndTypes() { return View(); } } }
.options { max-width: 385px; }