Your search did not match any results.
Map

Providers and Types

The provider option specifies which map provider to use: Google Maps (default), Bing Maps (used in this demo), or Google Static Maps.

You can also set the type option to specify the map type: road, satellite (photographic), or hybrid map.

@(Html.DevExtreme().Map() .ID("map") .Center("Brooklyn Bridge,New York,NY") .Zoom(14) .Height(400) .Width("100%") .Provider(GeoMapProvider.Bing) // NOTE: Specify your map API keys for every used provider //.Key(k => k // .Bing("YOUR_BING_MAPS_API_KEY") // .Google("YOUR_GOOGLE_MAPS_API_KEY") // .GoogleStatic("YOUR_GOOGLE_STATIC_MAPS_API_KEY") //) .Type(GeoMapType.Roadmap) ) <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Map Type</span> @(Html.DevExtreme().SelectBox() .ID("choose-type") .DataSource(new[] { new { key = GeoMapType.Roadmap, name = "Road Map" }, new { key = GeoMapType.Satellite, name = "Satellite (Photographic) Map" }, new { key= GeoMapType.Hybrid, name= "Hybrid Map" } }) .DisplayExpr("name") .ValueExpr("key") .Value(GeoMapType.Roadmap) .OnValueChanged("selectBoxChooseType_onValueChanged") ) </div> </div> <script> 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 { 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; }