Migrate deprecated google marker to google advanced marker (#576)

* Google Advanced Markers need a map ID. Adjust documentation. * load marker library from google maps api, neccessary for AdvancedMarkers * get mapId from settings into javascript * include basic AdvancedMarkers, without InfoWindow (because it breaks in new version) * prepare new marker for InfoWindow * Fix some var/const javascript things * include InfoWindow again --------- Co-authored-by: Dr. Caroline Loebhard <[email protected]> Co-authored-by: Georg Ringer <[email protected]>
FriendsOfTYPO3 · Sep 9, 2024 · c6bad72 · c6bad72
1 parent 3d6dc84
commit c6bad72
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 14 deletions.
diff --git a/Documentation/Configuration/TypoScript/Index.rst b/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

diff --git a/Resources/Private/Partials/Maps.html b/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>

diff --git a/Resources/Public/JavaScript/Frontend/GoogleMaps.js b/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);