Providers and Types

The provider property 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 property to specify the map type: road, satellite (photographic), or hybrid map.

Prev Demo

Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@(Html.DevExtreme().Map() .ID("map") .Center("40.7061, -73.9969") .Zoom(14) .Height(400) .Width("100%") .Provider(GeoMapProvider.Bing) .ApiKey(k => k.Bing("Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC")) .Type(GeoMapType.Roadmap) ) <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Map Type</span> @(Html.DevExtreme().SelectBox() .ID("choose-type") .InputAttr("aria-label", "Map 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 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; display: flex; align-items: center; } .option > span { display: inline-block; width: 100px; } .option > .dx-selectbox { width: 100%; max-width: 350px; display: inline-block; vertical-align: middle; }