Merge branch 'master' into feature/sets

.editorconfig

@@ -1,20 +1,67 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
 root = true
 
-[{*.rst,*.rst.txt}]
+# Unix-style newlines with a newline ending every file
+[*]
 charset = utf-8
 end_of_line = lf
+indent_style = space
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
-indent_style = space
+
+# TS/JS-Files
+[*.{ts,js,mjs}]
+indent_size = 2
+
+# JSON-Files
+[*.json]
+indent_style = tab
+
+# ReST-Files
+[*.{rst,rst.txt}]
 indent_size = 4
 max_line_length = 80
 
-# MD-Files
+# Markdown-Files
 [*.md]
-charset = utf-8
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-indent_style = space
-indent_size = 4
 max_line_length = 80
+
+# YAML-Files
+[*.{yaml,yml}]
+indent_size = 2
+
+# NEON-Files
+[*.neon]
+indent_size = 2
+indent_style = tab
+
+# stylelint
+[.stylelintrc]
+indent_size = 2
+
+# package.json
+[package.json]
+indent_size = 2
+
+# TypoScript
+[*.{typoscript,tsconfig}]
+indent_size = 2
+
+# XLF-Files
+[*.xlf]
+indent_style = tab
+
+# SQL-Files
+[*.sql]
+indent_style = tab
+indent_size = 2
+
+# .htaccess
+[{_.htaccess,.htaccess}]
+indent_style = tab
+
+[Makefile]
+indent_style = tab

Documentation/Configuration/TypoScript/Index.rst

@@ -168,6 +168,7 @@ Settings
          settings {
             map {
                googleMaps.key = ABCDEFG123
+               googleMaps.mapId = DEMO_MAP_ID
                rendering = googleMaps
             }
          }
@@ -180,6 +181,14 @@ Settings
 
    Key for variant **Google Maps**
 
+.. confval:: settings.map.googleMaps.mapId
+
+   :Path: plugin.tx_ttaddress
+   :type: string
+
+   Map ID for **Google Maps**
+   See: `official docs <https://developers.google.com/maps/documentation/get-map-id>`__
+
 .. confval:: map.staticGoogleMaps.parameters
 
    :Path: plugin.tx_ttaddress

Resources/Private/Partials/Maps.html

@@ -15,9 +15,15 @@
         <f:then>
             <f:render section="rendering" arguments="{_all}"/>
 
-            <script src="https://maps.googleapis.com/maps/api/js?key={settings.map.googleMaps.key}"
-                    type="text/javascript"></script>
-            <script type="text/javascript" src="{f:uri.resource(path:'JavaScript/Frontend/GoogleMaps.js')}"></script>
+            <script src="https://maps.googleapis.com/maps/api/js?key={settings.map.googleMaps.key}&v=weekly&libraries=marker"
+                    type="text/javascript" defer></script>
+
+            <script
+              type="text/javascript"
+              id="ttaddress_google_maps"
+              src="{f:uri.resource(path:'JavaScript/Frontend/GoogleMaps.js')}"
+              data-mapId="{settings.map.googleMaps.mapId}">
+            </script>
         </f:then>
         <f:else>
             <div class="alert alert-danger">{f:translate(key:'no_google_maps_key')}</div>

Resources/Public/JavaScript/Frontend/GoogleMaps.js

@@ -1,45 +1,49 @@
 function ttAddressGoogleMaps() {
     var obj = {};
+    var mapId = document.getElementById("ttaddress_google_maps").getAttribute("data-mapId");
 
     obj.map = null;
     obj.markers = [];
 
     obj.run = function () {
-        const mapOptions = {
+        var mapOptions = {
             center: new google.maps.LatLng(48.3057664, 14.2873126),
             zoom: 11,
             maxZoom: 15,
             streetViewControl: false,
-            fullscreenControl: false
+            fullscreenControl: false,
+            mapId: mapId, // Map ID is required for advanced markers.
         };
         obj.map = new google.maps.Map(document.getElementById('ttaddress__map'), mapOptions);
-        infoWindow = new google.maps.InfoWindow();
+        var infoWindow = new google.maps.InfoWindow();
 
         var bounds = new google.maps.LatLngBounds();
 
         var records = document.getElementById("ttaddress__records").children;
         for (var i = 0; i < records.length; i++) {
             var item = records[i];
+            var recordId = item.getAttribute('data-id');
+            var position = new google.maps.LatLng(item.getAttribute('data-lat'), item.getAttribute('data-lng'));
 
-            var marker = new google.maps.Marker({
+            const marker = new google.maps.marker.AdvancedMarkerElement({
                 map: obj.map,
-                position: new google.maps.LatLng(item.getAttribute('data-lat'), item.getAttribute('data-lng')),
-                infowindow: infoWindow,
-                recordId: item.getAttribute('data-id')
+                position: position,
+                gmpClickable: true,
+                title: recordId,
             });
 
             google.maps.event.addListener(marker, 'click', function (e) {
-                infoWindow.setContent(document.getElementById('ttaddress__record-' + this.recordId).innerHTML);
+                infoWindow.setContent(document.getElementById('ttaddress__record-' + marker.title).innerHTML);
                 infoWindow.open(obj.map, this);
 
                 var allLabels = document.querySelectorAll('.ttaddress__label');
                 for (var i = 0; i < allLabels.length; i++) {
                     allLabels[i].classList.remove('active')
                 }
-                document.getElementById('ttaddress__label-' + this.recordId).classList.add('active');
-
+                document.getElementById('ttaddress__label-' + marker.title).classList.add('active');
             });
-            bounds.extend(marker.getPosition());
+
+            bounds.extend(position);
             obj.markers.push(marker);
         }
         obj.map.fitBounds(bounds);

Resources/Public/JavaScript/esm/leaflet-backend.js

@@ -200,31 +200,28 @@ class LeafletBackendModule {
       .classList.remove("active");
   }
 
-  geocode() {
-    async function fetchGeoData() {
-      try {
-        let response = await fetch(this.geoCodeUrl);
-        let data = await response.json();
-
-        if (data.length === 0) {
-          response = await fetch(this.geoCodeUrlShort);
-          data = await response.json();
-        }
+  async geocode() {
+    try {
+      let response = await fetch(this.geoCodeUrl);
+      let data = await response.json();
+
+      if (data.length === 0) {
+        response = await fetch(this.geoCodeUrlShort);
+        data = await response.json();
+      }
 
-        if (data.length !== 0) {
-          const firstResult = data[0];
-          if ("lat" in firstResult) {
-            this.latitude = firstResult.lat;
-          }
-          if ("lon" in firstResult) {
-            this.longitude = firstResult.lon;
-          }
+      if (data.length !== 0) {
+        const firstResult = data[0];
+        if ("lat" in firstResult) {
+          this.latitude = firstResult.lat;
+        }
+        if ("lon" in firstResult) {
+          this.longitude = firstResult.lon;
         }
-      } catch (error) {
-        console.error("Error fetching geo data:", error);
       }
+    } catch (error) {
+      console.error("Error fetching geo data:", error);
     }
-    fetchGeoData();
   }
 }