Your search did not match any results.
Map

Markers

API Reference
The dxMap widget can display markers on the map. The array of displayed markers is held in the "markers" option. Markers can include tooltips in order to provide additional information to the end-user.
Copy to Codepen
Apply
Reset
$(function(){ var markerUrl = "https://js.devexpress.com/Demos/RealtorApp/images/map-marker.png", markersData = [{ location: [40.755833, -73.986389], tooltip: { text: "Times Square" } }, { location: "40.7825, -73.966111", tooltip: { text: "Central Park" } }, { location: { lat: 40.753889, lng: -73.981389}, tooltip: { text: "Fifth Avenue" } }, { location: "Brooklyn Bridge,New York,NY", tooltip: { text: "Brooklyn Bridge" } } ]; var mapWidget = $("#map").dxMap({ zoom: 11, height: 440, width: "100%", controls: true, markerIconSrc: markerUrl, markers: markersData }).dxMap("instance"); $("#use-custom-markers").dxCheckBox({ value: true, text: "Use custom marker icons", onValueChanged: function(data) { mapWidget.option("markers", markersData); mapWidget.option("markerIconSrc", data.value ? markerUrl : null); } }); $("#show-tooltips").dxButton({ text: "Show all tooltips", onClick: function() { var newMarkers = $.map(markersData, function(item) { return $.extend(true, {}, item, { tooltip: { isShown: true }} ); }); mapWidget.option("markers", newMarkers); } }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="map"></div> <div id="use-custom-markers"></div><br /> <div id="show-tooltips"></div> </div> </body> </html>
#use-custom-markers { min-width: 240px; } #use-custom-markers, #show-tooltips { margin-top: 10px; margin-left: 10px; }