Merge pull request #2 from DevExpress-Examples/readme

Update example

Author: vladaskorohodova

Readme.md

@@ -6,23 +6,11 @@
 
 # Map for DevExtreme - How to add a marker with a label
 
-This example demonstrates how to add a marker with a label to the Google map. We used the <a href="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/reference.html">MarkerWithLabel</a> class for this task. This class constructor requires the Google map instance. dxMap allows obtaining the instance in the <a href="http://phonejs.devexpress.com/Documentation/ApiReference/Widgets/dxMap/Configuration?version=13_2#readyAction">dxMap.readyAction</a> event handler using the <strong>originalMap</strong> parameter. The <a href="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html">MarkerWithLabel Examples</a> web page demonstrates how to use the <strong>MarkerWithLabel</strong> class. We can use the same code in the <strong>dxMap.readyAction</strong> event handler. However, we should remember that dxMap loads the map's APIs dynamically and that is why we need to load a file that contains code for the <strong>MarkerWithLabel</strong> class when a map is completely loaded. We used <a href="http://api.jquery.com/jquery.getscript/">jQuery.getScript</a> for this purpose as shown below:
-
-```js
-readyAction: function (s) {
-    $.getScript("js/markerwithlabel.js", function () {
-        var map = s.originalMap;
-        var markerSettings = {
-            position: new google.maps.LatLng(40.749825, -73.987963),
-            map: map,
-            labelContent: "Label text",
-            labelAnchor: new google.maps.Point(26, 0),
-            labelClass: "mylabel"
-        };
-        var marker = new MarkerWithLabel(markerSettings);
-    });
-}
-```
+This example demonstrates how to add a marker with a label to the Google map. We used the <a href="https://github.com/googlemaps/js-markerwithlabel">js-markerwithhlabel</a> library for this task.
+
+![Markers with labels](./map-marker-with-label.png)
+
+The Map component allows obtaining the instance in the <a href="https://js.devexpress.com/jQuery/Documentation/ApiReference/UI_Components/dxMap/Configuration/#onReady">onReady</a> event handler using the <strong>originalMap</strong> parameter.
 
 ## Files to Review
 

jQuery/index.html

@@ -7,9 +7,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
-    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.1.11/css/dx.common.css">
-    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.1.11/css/dx.light.css">
-    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/18.1.11/js/dx.all.js"></script>
+    <script src="https://unpkg.com/@googlemaps/markerwithlabel/dist/index.min.js"></script>
+    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.1.4/css/dx.light.css">
+    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/23.1.4/js/dx.all.js"></script>
+    
+    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
 
     <script type="text/javascript" src="script.js"></script>
 </head>

jQuery/script.js

@@ -1,22 +1,35 @@
-$(function(){  
-    $("#map").dxMap({
-        location: "40.749825, -73.987963",
-        width: 1200,
-        height: 620,
-        zoom: 12,
-        provider: "google",
-        readyAction: function (s) {
-            $.getScript("markerwithlabel.js", function () {
-                var map = s.originalMap;
-                var markerSettings = {
-                    position: new google.maps.LatLng(40.749825, -73.987963),
-                    map: map,
-                    labelContent: "Label text",
-                    labelAnchor: new google.maps.Point(26, 0),
-                    labelClass: "mylabel"
-                };
-                var marker = new MarkerWithLabel(markerSettings);
-            });
-        }
-    });
-});
+$(function () {
+  $("#map").dxMap({
+    apiKey: "YOUR_API_KEY",
+    width: 1200,
+    height: 620,
+    zoom: 14,
+    center: "49.47805, -123.84716",
+    provider: "google",
+    onReady: function (s) {
+      const map = s.originalMap;
+      var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
+
+      var marker1 = new markerWithLabel.MarkerWithLabel({
+        position: homeLatLng,
+        draggable: false,
+        clickable: false,
+        map: map,
+        labelContent: "$425K",
+        labelAnchor: new google.maps.Point(-21, 3),
+        labelClass: "labels", // the CSS class for the label
+        labelStyle: { opacity: 0.75 },
+      });
+
+      var marker2 = new markerWithLabel.MarkerWithLabel({
+        position: new google.maps.LatLng(49.475, -123.84),
+        draggable: true,
+        map: map,
+        labelContent: "$395K",
+        labelAnchor: new google.maps.Point(-21, 3),
+        labelClass: "labels", // the CSS class for the label
+        labelStyle: { opacity: 1.0 },
+      });
+    },
+  });
+});