Replace static maps, fix z-index issue

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Gmap.vue

@@ -35,8 +35,10 @@
                 });
                 this.map.setZoom(this.zoom);
                 if (this.lat && this.lng) {
-                    const center = L.latLng(this.lat, this.lng);
+                    const position = L.latLng(this.lat, this.lng);
-                    this.map.setView(center);
+                    const marker = L.marker(position);
+                    marker.addTo(this.map);
+                    this.map.setView(position);
                 } else if (this.markers) {
                     const bounds = L.latLngBounds();
                     for (let item of this.markers) {
@@ -63,3 +65,9 @@
         }
     }
 </script>
+
+<style>
+    .leaflet-top, .leaflet-bottom {
+        z-index: 490 !important;
+    }
+</style>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue

@@ -11,6 +11,7 @@
     import Calendar from './Calendar.vue'
     import FacebookPixel from './FacebookPixel.vue'
     import WatchlistToggle from './WatchlistToggle.vue'
+    import Gmap from './Gmap.vue'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
 
@@ -24,7 +25,8 @@
             AjaxContent,
             Calendar,
             FacebookPixel,
-            WatchlistToggle
+            WatchlistToggle,
+            Gmap
         },
         data () {
             return {

web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html

@@ -89,16 +89,14 @@
                                                 src="{ep:uri.video(value: product.video)}"></iframe>
                                     </div>
                                 </f:if>
-                                <f:comment>
                                 <div class="ep-sidebar ep-snow">
                                     <p><strong>Lage</strong></p>
                                     <div>
                                         <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" title="{hotel.name}">
-                                                {ep:gmapsStaticMap(hotel: hotel, width: 330, height: 200)}
+                                            <gmap lat="{hotel.latitude}" lng="{hotel.longitude}" :zoom="12"></gmap>
                                         </a>
                                     </div>
                                 </div>
-                                </f:comment>
                                 <f:render partial="Region/Webcam" arguments="{region: region}"/>
                                 <f:render partial="RegionMaps" arguments="{region: product.region}"/>
                                 <f:render partial="RegionAward" arguments="{region: product.region}"/>
@@ -195,7 +193,7 @@
                                     <p><strong>Lage</strong></p>
                                     <div>
                                         <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" title="{hotel.name}">
-                                            {ep:gmapsStaticMap(hotel: hotel, width: 330, height: 200)}
+                                            <gmap lat="{hotel.latitude}" lng="{hotel.longitude}" :zoom="12"></gmap>
                                         </a>
                                     </div>
                                 </div>