Map ▸ Markers

The Map component can display markers on the map. The collection of displayed markers is declared in the markers array. Markers can include tooltips that provide additional information.

[note] When copying this demo to CodeSandbox, specify your own apiKey. Our demo keys can be used only on our website.

Options

@(Html.DevExtreme().Map()
    .ID("map")
    .Provider(GeoMapProvider.Azure)
    .ApiKey(k => k.Azure("6N8zuPkBsnfwniNAJkldM3cUgm3lXg3y9gkIKy59benICnnepK4DJQQJ99AIACYeBjFllM6LAAAgAZMPGFXE"))
    .Zoom(11)
    .Height(440)
    .Width("100%")
    .Controls(true)
    .MarkerIconSrc(new JS("markerUrl"))
    .Markers(markers => {
        markers.Add().Coordinates(40.755833, -73.986389).Tooltip(t => t.Text("Times Square"));
        markers.Add().Address("40.7825, -73.966111").Tooltip(t => t.Text("Central Park"));
        markers.Add().Coordinates(40.753889, -73.981389).Tooltip(t => t.Text("Fifth Avenue"));
        markers.Add().Address("Brooklyn Bridge,New York,NY").Tooltip(t => t.Text("Brooklyn Bridge"));
    })
)

<div class="options">
    <div class="caption">Options</div>
    <div class="option">
        @(Html.DevExtreme().CheckBox()
            .ID("use-custom-markers")
            .Value(true)
            .Text("Use custom marker icons")
            .OnValueChanged("checkBox_onValueChanged")
        )
    </div>
    <div class="option">
        @(Html.DevExtreme().Button()
            .ID("show-tooltips")
            .Text("Show all tooltips")
            .OnClick("button_onClick")
        )
    </div>
</div>

<script>
    var markerUrl = "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/maps/map-marker.png";

    function checkBox_onValueChanged(data) {
        var mapWidget = $("#map").dxMap("instance");
        var markersData = mapWidget.option("markers");
        var newMarkers = $.map(markersData, function (item) {
            return $.extend(true, {}, item, { tooltip: { isShown: false }} );
        });
        mapWidget.option("markers", newMarkers);
        mapWidget.option("markerIconSrc", data.value ? markerUrl : null);
    }

    function button_onClick() {
        var mapWidget = $("#map").dxMap("instance");
        var markersData = mapWidget.option("markers");
        var newMarkers = $.map(markersData, function (item) {
            return $.extend(true, {}, item, { tooltip: { isShown: true }} );
        });
        mapWidget.option("markers", newMarkers);
    }
</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 Markers() {
            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;
}