Massiv +

backend/templates/info.html

@@ -17,15 +17,54 @@
   {% elif page == 'location' %}
     <p><strong>{{ location_name }}</strong></p>
     <p>{{ location_address }}</p>
-    <div class="map-wrap">
-      <iframe
-        src="{{ google_maps_embed_url }}"
-        loading="lazy"
-        referrerpolicy="no-referrer-when-downgrade"
-        allowfullscreen
-      ></iframe>
+    <div class="map-wrap map-consent" data-map-consent>
+      <p>{{ t('maps_privacy_notice') }}</p>
+      <button
+        class="map-preview"
+        type="button"
+        data-map-load
+        aria-label="{{ t('maps_load_button') }}"
+        title="{{ t('maps_load_button') }}"
+        style="--map-preview-image: url('{{ url_for('static', filename='assets/location-map-preview.svg') }}');"
+      >
+        <span class="map-preview-overlay">{{ t('maps_load_button') }}</span>
+      </button>
+      <div class="map-embed-target" data-map-embed-target></div>
+      <div class="location-actions">
+        <a class="btn" href="{{ location_website_url }}" target="_blank" rel="noopener">{{ t('visit_location') }}</a>
+      </div>
     </div>
-    <a class="btn" href="{{ location_website_url }}" target="_blank" rel="noopener">{{ t('visit_location') }}</a>
+
+    <script>
+      (() => {
+        const wrapper = document.querySelector("[data-map-consent]");
+        if (!wrapper) return;
+        const loadButtons = Array.from(wrapper.querySelectorAll("[data-map-load]"));
+        const previewButton = wrapper.querySelector(".map-preview");
+        const target = wrapper.querySelector("[data-map-embed-target]");
+        const src = {{ google_maps_embed_url|tojson }};
+        let loaded = false;
+
+        const loadMap = () => {
+          if (loaded) return;
+          const iframe = document.createElement("iframe");
+          iframe.src = src;
+          iframe.loading = "lazy";
+          iframe.referrerPolicy = "no-referrer-when-downgrade";
+          iframe.allowFullscreen = true;
+          target.appendChild(iframe);
+          if (previewButton) {
+            previewButton.remove();
+          }
+          loadButtons.forEach((button) => button.remove());
+          loaded = true;
+        };
+
+        loadButtons.forEach((button) => {
+          button.addEventListener("click", loadMap);
+        });
+      })();
+    </script>
   {% endif %}
 </section>
 {% endblock %}