Guida: inserire la mappa tramite iframe nel sito

Questa guida spiega come inserire nel sito una porzione di HTML che, tramite iframe, mostra il contenuto della pagina /maps/embed contenente la mappa.

Codice base da incollare

Questo è il codice minimo. Va bene per un test o per un blocco HTML semplice.

<iframe
  src="http://dominio-livigno/maps/embed"
  title="Mappa Passi Alpini Livigno"
  width="100%"
  height="600"
  style="border:0;"
  loading="lazy"
  allowfullscreen>
</iframe>

Cosa significano gli attributi principali

• src: indirizzo della pagina da mostrare.
• title: descrizione per accessibilità.
• width/height: larghezza e altezza.
• style="border:0;": rimuove il bordo dell’iframe.
• loading="lazy": carica l’iframe solo quando serve.
• allowfullscreen: permette la visualizzazione a schermo intero.

Versione responsive consigliata

Questa versione si adatta meglio a desktop, tablet e smartphone.

<div
  style="position:relative; width:100%; max-width:1200px; margin:0 auto; aspect-ratio:16/9; min-height:400px;">
  <iframe
    src="http://dominio-livigno/maps/embed"
    title="Mappa Passi Alpini Livigno"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    allow="fullscreen; geolocation"
    allowfullscreen
    style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;">
  </iframe>
</div>

Verifica finale

Dopo aver inserito il codice:

• Apri la pagina in una finestra di navigazione anonima.
• Controlla che la mappa venga visualizzata.
• Prova da smartphone e desktop.
• Se non si vede, apri la console del browser con F12 e controlla eventuali errori.