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.

@(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) ) <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Map Provider</span> @(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 class="option"> <span>Map Type</span> @(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> <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 Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class MapController : Controller { public ActionResult ProvidersAndTypes() { return View(); } } }
.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); 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; }