Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Map: implement mapId and useAdvancedMarkers options #28029

Merged
merged 7 commits into from
Sep 17, 2024
Merged

Map: implement mapId and useAdvancedMarkers options #28029

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8ef6f1a
Map: implement mapId and useAdvancedMarkers options
Zedwag Sep 12, 2024
4da58b7
pull upstream 24_2
Zedwag Sep 12, 2024
726a10f
runtime change handle
Zedwag Sep 12, 2024
c742ccf
adress suggestions
Zedwag Sep 15, 2024
df7a1de
fix test in nojQ
Zedwag Sep 15, 2024
432a1fc
implement suggestions
Zedwag Sep 16, 2024
a7e77d8
add user-select none for advanced marker
Zedwag Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions packages/devextreme/js/__internal/ui/map/m_map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,10 @@ const Map = Widget.inherit({
google: '',
googleStatic: '',
},
googleMapConfig: {
mapId: '',
useAdvancedMarkers: true,
},
controls: false,
onReady: null,
// for internal use only
Expand All @@ -82,6 +86,13 @@ const Map = Widget.inherit({
]);
},

_setDeprecatedOptions() {
this.callBase();
extend(this._deprecatedOptions, {
'googleMapConfig.useAdvancedMarkers': { since: '24.2', message: 'Google deprecated the original map markers. Transition to advanced markers for future compatibility.' },
Zedwag marked this conversation as resolved.
Show resolved Hide resolved
});
},

_renderFocusTarget: noop,

_init() {
Expand Down Expand Up @@ -238,6 +249,11 @@ const Map = Widget.inherit({
}
case 'markerIconSrc':
this._queueAsyncAction('updateMarkers', this._rendered.markers, this._rendered.markers);
break;
case 'googleMapConfig':
this._suppressAsyncAction = true;
ksercs marked this conversation as resolved.
Show resolved Hide resolved
this._invalidate();

Zedwag marked this conversation as resolved.
Show resolved Hide resolved
break;
case 'onReady':
case 'onUpdated':
Expand Down
41 changes: 31 additions & 10 deletions packages/devextreme/js/__internal/ui/map/m_provider.dynamic.google.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
ksercs marked this conversation as resolved.
Show resolved Hide resolved
const INFO_WINDOW_CLASS = 'gm-style-iw';

let CustomMarker;
Expand Down Expand Up @@ -192,12 +193,13 @@ 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 { mapId } = this._option('googleMapConfig');
Zedwag marked this conversation as resolved.
Show resolved Hide resolved
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', () => {
Expand Down Expand Up @@ -303,11 +305,20 @@ const GoogleProvider = DynamicProvider.inherit({
}, options.htmlOffset),
});
} else {
marker = new google.maps.Marker({
position: location,
map: this._map,
icon: options.iconSrc || this._option('markerIconSrc'),
});
const { useAdvancedMarkers } = this._option('googleMapConfig');
Zedwag marked this conversation as resolved.
Show resolved Hide resolved
if (useAdvancedMarkers) {
marker = new google.maps.marker.AdvancedMarkerElement({
position: location,
map: this._map,
content: this._createIconTemplate(this._option('markerIconSrc')),
Zedwag marked this conversation as resolved.
Show resolved Hide resolved
ksercs marked this conversation as resolved.
Show resolved Hide resolved
});
} else {
marker = new google.maps.Marker({
position: location,
map: this._map,
icon: options.iconSrc || this._option('markerIconSrc'),
});
}
}

const infoWindow = this._renderTooltip(marker, options.tooltip);
Expand Down Expand Up @@ -335,6 +346,16 @@ const GoogleProvider = DynamicProvider.inherit({
});
},

_createIconTemplate(iconSrc: string) {
const imgNode = document.createElement('img');
ksercs marked this conversation as resolved.
Show resolved Hide resolved

imgNode.src = iconSrc;
imgNode.alt = 'Marker icon';
ksercs marked this conversation as resolved.
Show resolved Hide resolved
imgNode.classList.add(MAP_MARKER_CLASS);

return imgNode;
},

_renderTooltip(marker, options) {
if (!options) {
return;
Expand Down
50 changes: 49 additions & 1 deletion packages/devextreme/testing/helpers/forMap/googleMock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@
},
Marker: function(options) {
if(options) {
google.markerType = 'old';
google.markerOptionsSpecified = true;
google.markerInstance = (google.markerInstance || 0) + 1;
google.markerOptions = {};
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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() {};
Expand Down
Loading
Loading