ROU-4883: change Markers to use new Google AdvancedMarker

[rugoncalves]

The Google Maps API, google.maps.Marker, that we are currently using on OutSystemsMaps for markers was deprecated on February 21st 2024 and needs to be replaced with the new one, google.maps.marker.AdvancedMarkerElement.

This will cause the warning above to appear, once the Google Maps script is updated to version v3.56 and above.
OutSystems Maps is currently using v3.55, that is available until November 2024.

What was happening

• Google Maps added the new Maps JavaScript API on version v3.53.2, and the currently version that we are using, v3.55, is the last that the google.maps.Marker is available to use.
• Google will not remove the code for the Marker class, but highly recommends to use the new AdvancedMarker
• Differences between Marker (legacy) vs AdvancedMarkerElement
  • The following properties are no longer available → icon, label and location
  • The following methods, of Marker (legacy), no longer exist:
    • getAnimation
    • getClickable
    • getCursor
    • getDraggable
    • getIcon
    • getLabel
    • getMap
    • getOpacity
    • getPosition
    • getPosition
    • getShape
    • getTitle
    • getVisible
    • getZIndex
    • setAnimation
    • setClickable
    • setCursor
    • setDraggable
    • setIcon
    • setLabel
    • setMap
    • setOpacity
    • setOptions
    • setPosition
    • setShape
    • setTitle
    • setVisible
    • setZIndex
  • The following events are no longer available in the provider:
    • animation_changed ❌
    • auxclick ✅
    • clickable_changed ❌
    • contextmenu ✅
    • cursor_changed ❌
    • dblclick ✅
    • draggable_changed ❌
    • flat_changed ❌
    • icon_changed ❌
    • mousedown ✅
    • mouseout ✅
    • mouseover ✅
    • mouseup ✅
    • position_changed ❌
    • rightclick ✅
    • shape_changed ❌
    • title_changed ❌
    • visible_changed ❌
    • zindex_changed ❌
    • ⚠ Events with ❌ were not migrated, and will have no effect. While ✅ were.

What was done

• Adapted the require changes to the new AdvancedMarker
  • Removed method usage was replaced by newly added properties and getters/setters
  • Changed the way images and labels are added:
    • Now OutSystems Maps builds the HTML:
    • The following CSS classes were added: os-marker-icon and os-marker-icon-label
  • The following events were made available in a different way
    • auxclick
    • contextmenu
    • dblclick
    • mousedown
    • mouseout
    • mouseover
    • mouseup
    • rightclick

Test Steps

1. Navigate through the test pages, check markers behaviors.

Checklist

• tested locally
• documented the code
• clean all warnings and errors of eslint
• requires changes in OutSystems (if so, provide a module with changes)
• requires new sample page in OutSystems (if so, provide a module with changes)

[sonarcloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud