Map: implement mapId and useAdvancedMarkers options (#28029)

DevExpress · Sep 17, 2024 · 03e41cb · 03e41cb
1 parent 88e6667
commit 03e41cb
Show file tree

Hide file tree

Showing 5 changed files with 666 additions and 399 deletions.
diff --git a/packages/devextreme-scss/scss/widgets/base/_map.scss b/packages/devextreme-scss/scss/widgets/base/_map.scss
@@ -14,3 +14,7 @@
   background: rgba(0, 0, 0, 0.01);
   opacity: 0.01;
 }
+
+.dx-map-marker {
+  user-select: none;
+}
diff --git a/packages/devextreme/js/__internal/ui/map/m_map.ts b/packages/devextreme/js/__internal/ui/map/m_map.ts
@@ -61,6 +61,10 @@ const Map = Widget.inherit({
         google: '',
         googleStatic: '',
       },
+      providerConfig: {
+        mapId: '',
+        useAdvancedMarkers: true,
+      },
       controls: false,
       onReady: null,
       // for internal use only
@@ -82,6 +86,13 @@ const Map = Widget.inherit({
     ]);
   },
 
+  _setDeprecatedOptions() {
+    this.callBase();
+    extend(this._deprecatedOptions, {
+      'providerConfig.useAdvancedMarkers': { since: '24.2', message: 'Google deprecated the original map markers. Transition to advanced markers for future compatibility.' },
+    });
+  },
+
   _renderFocusTarget: noop,
 
   _init() {
@@ -239,6 +250,10 @@ const Map = Widget.inherit({
       case 'markerIconSrc':
         this._queueAsyncAction('updateMarkers', this._rendered.markers, this._rendered.markers);
         break;
+      case 'providerConfig':
+        this._suppressAsyncAction = true;
+        this._invalidate();
+        break;
       case 'onReady':
       case 'onUpdated':
       case 'onMarkerAdded':

diff --git a/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.google.ts b/packages/devextreme/js/__internal/ui/map/m_provider.dynamic.google.ts
@@ -18,8 +18,9 @@ declare let google: any;
 
 const window = getWindow();
 
+const MAP_MARKER_CLASS = 'dx-map-marker';
 const GOOGLE_MAP_READY = '_googleScriptReady';
-let GOOGLE_URL = `https://maps.googleapis.com/maps/api/js?callback=${GOOGLE_MAP_READY}`;
+let GOOGLE_URL = `https://maps.googleapis.com/maps/api/js?callback=${GOOGLE_MAP_READY}&libraries=marker&loading=async`;
 const INFO_WINDOW_CLASS = 'gm-style-iw';
 
 let CustomMarker;
@@ -192,12 +193,14 @@ const GoogleProvider = DynamicProvider.inherit({
   _init() {
     return new Promise((resolve) => {
       this._resolveLocation(this._option('center')).then((center) => {
-        const showDefaultUI = this._option('controls');
-
+        const disableDefaultUI = !this._option('controls');
+        const providerConfig = this._option('providerConfig');
+        const mapId = providerConfig?.mapId ?? '';
         this._map = new google.maps.Map(this._$container[0], {
-          zoom: this._option('zoom'),
           center,
-          disableDefaultUI: !showDefaultUI,
+          disableDefaultUI,
+          mapId,
+          zoom: this._option('zoom'),
         });
 
         const listener = google.maps.event.addListener(this._map, 'idle', () => {
@@ -303,11 +306,23 @@ const GoogleProvider = DynamicProvider.inherit({
           }, options.htmlOffset),
         });
       } else {
-        marker = new google.maps.Marker({
-          position: location,
-          map: this._map,
-          icon: options.iconSrc || this._option('markerIconSrc'),
-        });
+        const providerConfig = this._option('providerConfig');
+        const useAdvancedMarkers = providerConfig?.useAdvancedMarkers ?? true;
+        const icon = options.iconSrc || this._option('markerIconSrc');
+        if (useAdvancedMarkers) {
+          const content = icon ? this._createIconTemplate(icon) : undefined;
+          marker = new google.maps.marker.AdvancedMarkerElement({
+            position: location,
+            map: this._map,
+            content,
+          });
+        } else {
+          marker = new google.maps.Marker({
+            position: location,
+            map: this._map,
+            icon,
+          });
+        }
       }
 
       const infoWindow = this._renderTooltip(marker, options.tooltip);
@@ -335,6 +350,16 @@ const GoogleProvider = DynamicProvider.inherit({
     });
   },
 
+  _createIconTemplate(iconSrc: string) {
+    const $img = $('<img>');
+
+    $img.attr('src', iconSrc);
+    $img.attr('alt', 'Marker icon');
+    $img.addClass(MAP_MARKER_CLASS);
+
+    return $img[0];
+  },
+
   _renderTooltip(marker, options) {
     if (!options) {
       return;

diff --git a/packages/devextreme/testing/helpers/forMap/googleMock.js b/packages/devextreme/testing/helpers/forMap/googleMock.js
@@ -225,6 +225,7 @@
             },
             Marker: function(options) {
                 if(options) {
+                    google.markerType = 'old';
                     google.markerOptionsSpecified = true;
                     google.markerInstance = (google.markerInstance || 0) + 1;
                     google.markerOptions = {};
@@ -267,6 +268,53 @@
                 this.setVisible = function() {};
                 this.setZIndex = function() {};
             },
+            marker: {
+                AdvancedMarkerElement: function(options) {
+                    if(options) {
+                        google.markerType = 'advanced';
+                        google.markerOptionsSpecified = true;
+                        google.markerInstance = (google.markerInstance || 0) + 1;
+                        google.markerOptions = {};
+                        google.markerOptions.mapSpecified = options.map instanceof google.maps.Map;
+                        google.markerOptions.position = options.position;
+                        google.markerOptions.icon = options.content?.src;
+                    }
+
+                    this.getAnimation = function() {};
+                    this.getClickable = function() {};
+                    this.getCursor = function() {};
+                    this.getDraggable = function() {};
+                    this.getFlat = function() {};
+                    this.getMap = function() {};
+                    this.getPosition = function() {};
+                    this.getShadow = function() {};
+                    this.getShape = function() {};
+                    this.getTitle = function() {};
+                    this.getVisible = function() {};
+                    this.getZIndex = function() {};
+                    this.setAnimation = function() {};
+                    this.setClickable = function() {};
+                    this.setCursor = function() {};
+                    this.setDraggable = function() {};
+                    this.setFlat = function() {};
+                    this.getIcon = function() {
+                        return options.content?.src;
+                    };
+                    this.setIcon = function() {};
+                    this.setMap = function(map) {
+                        if(map === null) {
+                            google.markerRemoved = true;
+                        }
+                    };
+                    this.setOptions = function() {};
+                    this.setPosition = function() {};
+                    this.setShadow = function() {};
+                    this.setShape = function() {};
+                    this.setTitle = function() {};
+                    this.setVisible = function() {};
+                    this.setZIndex = function() {};
+                }
+            },
             OverlayView: function() {
                 this.bindTo = function() {};
                 this.getPanes = function() {
@@ -334,7 +382,7 @@
                     google.infoWindowOpened = (google.infoWindowOpened || 0) + 1;
                     google.openInfoWindowOptions = {};
                     google.openInfoWindowOptions.mapSpecified = map instanceof google.maps.Map;
-                    google.openInfoWindowOptions.markerSpecified = marker instanceof google.maps.Marker;
+                    google.openInfoWindowOptions.markerSpecified = marker instanceof google.maps.Marker || marker instanceof google.maps.marker.AdvancedMarkerElement;
                 };
                 this.close = function() {};
                 this.setMap = function() {};