Blocchi Mappa: Mostrare una Posizione Senza Nascondere l'Indirizzo

Un blocco mappa aiuta un visitatore a capire dove si trova un luogo reale e a passare dalla lettura alla navigazione. Il suo contenuto durevole è l’indirizzo verificato in HTML; la mappa visiva è un ausilio opzionale per l’orientamento. L’implementazione predefinita riserva l’area della mappa, mostra un leggero fallback statico e carica un fornitore interattivo approvato solo dopo che il visitatore lo richiede.

National Gallery
Trafalgar Square, London WC2N 5DN, Regno Unito
Mappa non caricata. Apri la posizione nella tua app di mappe, oppure attiva Carica mappa interattiva quando hai bisogno di ispezionare le strade circostanti.

Questa facciata renderizzata è utile prima di qualsiasi richiesta a terze parti. Nomina il luogo, espone l’indirizzo come testo selezionabile, spiega lo stato di non caricamento e fornisce due percorsi chiari: aprire una mappa esterna o caricare deliberatamente quella incorporata.

Perché questo elemento è importante

Le domande sulla posizione sono pratiche. Un visitatore potrebbe decidere se una sede è abbastanza vicina, controllare da che lato di una linea ferroviaria si trova, trovare l’ingresso corretto o confrontare i trasporti pubblici con il parcheggio. Una mappa riduce il lavoro mentale di tradurre un indirizzo sconosciuto in un contesto spaziale. Può rendere visibili i punti di riferimento vicini e le relazioni stradali più velocemente di un paragrafo.

Questa comodità non rende la mappa la fonte di verità. I visitatori potrebbero copiare un indirizzo, inviarlo a un’altra persona o leggerlo con tecnologie assistive. Le tile della mappa non supportano in modo affidabile queste azioni e dati deboli, impostazioni sulla privacy o guasti del fornitore potrebbero bloccarle. L’indirizzo deve rimanere utile senza la mappa.

Una mappa incorporata può aggiungere iframe, JavaScript, font, immagini e richieste a terze parti. Queste risorse competono con la risposta della pagina e potrebbero divulgare un indirizzo IP o avviare archiviazione soggetta a consenso. Un visitatore che non usa mai la mappa non dovrebbe sostenere questo costo.

L’estraibilità automatica significa che il software può identificare il luogo senza interpretare i pixel della mappa o eseguire il fornitore. I crawler di ricerca, i sistemi di intelligenza artificiale, i lettori schermo, gli strumenti di traduzione e le pipeline di dati locali hanno bisogno di un nome del luogo, un indirizzo postale completo, coordinate dove previste e un collegamento di destinazione stabile in HTML o campi strutturati. Un URL iframe non è un indirizzo affidabile. Le etichette dei fornitori possono cambiare e i pin possono essere leggermente spostati. Lo stesso record di posizione verificato dovrebbe alimentare l’indirizzo visibile, il segnaposto della mappa, il collegamento di navigazione e qualsiasi dato strutturato ammissibile.

Le regole di scrittura degli elementi hanno la precedenza: scegli un elemento tipizzato in base allo scopo, non all’aspetto. Se lo scopo è l’orientamento spaziale attorno a un luogo verificato, usa un blocco mappa. Se lo scopo è pubblicare i dettagli di contatto, usa un blocco orari e contatti o un blocco NAP e lascia che la mappa consumi lo stesso record di indirizzo. Se lo scopo è prenotare un orario, usa un blocco prenotazioni .

Quando usarlo

Usa un blocco mappa quando vedere il luogo nel suo contesto circostante aiuta il lettore a completare un’attività dipendente dalla posizione. Gli usi tipici includono un negozio, ufficio, clinica, sede di eventi, punto di ritiro, showroom, hotel, attrazione, filiale, ingresso di evento o confine di area di servizio. È particolarmente utile quando l’ingresso differisce dall’indirizzo postale, le strade vicine sono confuse, i percorsi di accessibilità necessitano di spiegazioni o i trasporti pubblici e il parcheggio influenzano la visita.

Conferma il segnaposto rispetto all’ingresso effettivo o al punto di servizio, piuttosto che accettare il primo risultato di geocodifica del fornitore. Per un luogo all’interno di un edificio più grande, indica piano, unità o ingresso nel testo.

I casi borderline spesso creano mappe accattivanti ma inutili:

• Un elenco di città servite: questa è una dichiarazione di area di servizio, non la prova di una posizione fisica. Non posizionare pin nei centri città implicando uffici.
• Un indirizzo postale senza accesso per visitatori: pubblica i dettagli postali e spiega che le visite non sono disponibili. Una mappa implicherebbe un’azione di arrivo non supportata.
• Un’azienda remota o solo online: una sede legale può essere rilevante dal punto di vista legale, ma non diventa una destinazione per i clienti solo perché un embed può localizzarla.
• Indicazioni passo-passo: collega a un fornitore di navigazione e fornisci note specifiche sul percorso. Una mappa statica incorporata non può tenere conto di traffico, chiusure o punto di partenza del visitatore.
• Molte posizioni: usa un localizzatore con un elenco testuale di risultati. Una nuvola di pin non può sostituire le singole pagine delle sedi.
• Prova di presenza locale: una mappa non è una prova che un team operi in quel luogo. Supporta l’affermazione con identità, indirizzo, contatto, orari e contenuti specifici della sede coerenti.
• Contesto geografico decorativo: se la posizione non influisce sull’attività, ometti la mappa. Uno skyline di città o un profilo regionale appartengono a uno scopo visivo diverso.

Dove posizionarlo

Posiziona la mappa immediatamente dopo il nome del luogo, l’indirizzo completo e qualsiasi qualificatore critico per la visita. In una pagina di posizione, la sequenza usuale è introduzione, indirizzo e dati di contatto, mappa, note di arrivo, orari, quindi l’azione di visita o prenotazione. Se le indicazioni stradali sono la risposta principale, riassumile prima della mappa.

Mantieni indirizzo, facciata mappa, controllo di caricamento, collegamento di fallback, didascalia e nota sulle indicazioni in un’unica regione etichettata. Il visitatore non dovrebbe dover attraversare una sezione di testimonianze o marketing per trovare l’indirizzo che appartiene al segnaposto. Un collegamento “Ottieni indicazioni” deve utilizzare le stesse coordinate o lo stesso identificatore del luogo del segnaposto visualizzato.

Il blocco può trovarsi vicino agli orari di apertura della stessa sede, ma non accanto a un indirizzo in conflitto, un’altra mappa, un video in riproduzione automatica o un annuncio pubblicitario stilizzato come un controllo. Non posizionarlo all’interno di un carosello, un accordion, un modale obbligatorio, una scheda nascosta o una cella di tabella stretta.

Non mettere la mappa tra un avviso e l’istruzione a cui si riferisce, o tra un’azione di prenotazione e i suoi prerequisiti. Non sovrapporre mai il testo essenziale dell’indirizzo, la formulazione del consenso o l’unico collegamento per le indicazioni sulle tile della mappa. Su mobile, preserva questo ordine di lettura: nome del luogo, indirizzo, qualificatore di visita, fallback, controllo di caricamento, area mappa, quindi indicazioni.

Anatomia

1. Nome del luogo: identifica la sede, il luogo o la destinazione rappresentata dal segnaposto.
2. Indirizzo testuale completo: include ogni riga dell’indirizzo, località, codice postale e paese necessari per distinguere il luogo.
3. Qualificatore di visita: indica ingresso, unità, piano, requisito di appuntamento, restrizione per visitatori o fatto di accessibilità quando modifica l’arrivo.
4. Viewport riservato: fissa larghezza e proporzioni prima del caricamento delle risorse interattive, prevenendo lo spostamento del layout.
5. Fallback statico: fornisce contesto spaziale utile senza script; deve essere un vero asset generato prima di essere referenziato.
6. Segnaposto: rappresenta il punto di arrivo verificato, non solo un codice postale o un centro amministrativo.
7. Controllo di caricamento: è un vero pulsante con un nome accessibile specifico, come “Carica mappa interattiva per National Gallery.”
8. Avviso fornitore: nomina la terza parte e spiega che l’attivazione potrebbe connettersi ad essa.
9. Collegamento indicazioni: apre una destinazione HTTPS stabile per la navigazione senza richiedere il player incorporato.
10. Didascalia o nota di riferimento: spiega la conclusione utile della mappa, come l’ingresso di fronte a una strada nominata.
11. Record posizione: fornisce coordinate governate, identificatore del luogo e data di verifica al renderer.
12. Stato di errore: preserva l’indirizzo, il collegamento indicazioni e la possibilità di riprovare se il fornitore non può caricare.

Esempi di design

Ogni variante mantiene l’indirizzo in HTML, riserva le dimensioni della mappa e fornisce un collegamento diretto per le indicazioni. Solo il comportamento di caricamento cambia.

Mappa statica con indicazioni esterne — costo minimo

Usa un’immagine mappa ottimizzata quando l’orientamento aiuta ma la panoramica e lo zoom non servono. Il testo alternativo enuncia la sua conclusione spaziale; la didascalia porta i punti di riferimento. Pubblica il percorso solo dopo che l’asset esiste.

Mappa interattiva su clic — predefinita

Mostra prima un fallback statico o un pannello riservato neutro. Un pulsante carica l’iframe approvato dopo l’attivazione esplicita. Questo protegge la velocità della pagina e rende intenzionale la connessione a terze parti, mantenendo disponibili su richiesta panoramica, zoom e ispezione stradale.

Mappa con consenso

Usa questa quando la politica sulla privacy del sito richiede il consenso prima di contattare il fornitore. Spiega la conseguenza in linguaggio semplice e offri il collegamento per le indicazioni senza richiedere il consenso. Rifiutare non deve nascondere l’indirizzo o impedire il funzionamento del resto della pagina.

Mappa interattiva sempre caricata — eccezione misurata

Usala solo quando l’interazione è centrale, il contatto con il fornitore è consentito e la misurazione sul campo accetta il costo. Il lazy loading può ancora inizializzarsi mentre il visitatore si avvicina. Mantieni un fallback renderizzato lato server perché loading="lazy" non può prevenire il guasto del fornitore.

Blocco monosede all’interno di un localizzatore

Per una pagina con più sedi, abbina la mappa selezionata a un elenco testuale di risultati. Caricare una sede selezionata mantiene l’interazione comprensibile; cambiare selezione aggiorna insieme nome del luogo, indirizzo, segnaposto e collegamento indicazioni. L’elenco rimane utilizzabile senza la mappa.

Parametri

“Fonte” indica da dove il renderer ottiene il valore creato dall’autore. Il sistema di posizione autorevole rimane responsabile della verifica dell’indirizzo e delle coordinate effettive.

Il renderer deve costruire gli URL del fornitore a partire da identificatori consentiti e coordinate numeriche. Gli autori non devono incollare HTML iframe arbitrario, chiavi API, token di accesso o JavaScript nel corpo. Sei decimali localizzano un punto con una precisione molto maggiore di quella normalmente necessaria a un visitatore; mantieni meno cifre quando pubblicare un ingresso privato esatto creerebbe un rischio per la sicurezza o la privacy.

Sintassi ed esempi di codice

Questi esempi portatili descrivono un modello di contenuto canonico. Un progetto deve implementare e testare il renderer corrispondente prima che gli autori utilizzino la sintassi in produzione.

Direttiva Markdown portatile

:::map{variant=facade place-id="north-street-clinic" latitude=51.454514 longitude=-2.587910 zoom=16 aspect-ratio="4/3" provider=osm directions-url="https://www.openstreetmap.org/directions?to=51.454514,-2.587910" verified=2026-08-27}
## North Street Clinic

18 North Street, Bristol BS1 3PR, Regno Unito

Usa l'ingresso del cortile accanto alla farmacia. L'accesso senza gradini è disponibile da North Street.
:::

La prima intestazione fornisce title; la riga successiva fornisce l’indirizzo strutturato; e il resto del corpo fornisce la didascalia o la nota di arrivo.

Mapping shortcode Hugo

Usa solo parametri nominati. Questa notazione documenta l’adattatore previsto; non sostiene che uno shortcode mappa esista già in questo repository.

{{< map variant="facade" placeId="north-street-clinic" latitude="51.454514" longitude="-2.587910" zoom="16" aspectRatio="4/3" provider="osm" directionsUrl="https://www.openstreetmap.org/directions?to=51.454514,-2.587910" verified="2026-08-27" >}}
## North Street Clinic

18 North Street, Bristol BS1 3PR, Regno Unito

Usa l'ingresso del cortile accanto alla farmacia. L'accesso senza gradini è disponibile da North Street.
{{< /map >}}

L’adattatore deve riservare le proporzioni, renderizzare l’indirizzo e il fallback sul server e creare l’iframe solo dopo il trigger dichiarato. Non deve mai esporre una chiave API del fornitore nel contenuto creato dall’autore.

Blocco WordPress

<!-- wp:amicited/map {"variant":"facade","placeId":"north-street-clinic","latitude":51.454514,"longitude":-2.587910,"zoom":16,"aspectRatio":"4/3","provider":"osm","directionsUrl":"https://www.openstreetmap.org/directions?to=51.454514,-2.587910","verified":"2026-08-27"} -->
<h2>North Street Clinic</h2>
<address>18 North Street, Bristol BS1 3PR, Regno Unito</address>
<p>Usa l'ingresso del cortile accanto alla farmacia. L'accesso senza gradini è disponibile da North Street.</p>
<!-- /wp:amicited/map -->

Un blocco nativo dovrebbe memorizzare le coordinate come numeri, mantenere i campi dell’indirizzo strutturati, validare il fornitore e renderizzare una facciata lato server sicura. L’anteprima dell’editor può mostrare una rappresentazione statica anziché inizializzare il fornitore completo.

Esempi buoni e cattivi

Buono

North Street Clinic
18 North Street, Bristol BS1 3PR, Regno Unito
Usa l’ingresso del cortile accanto alla farmacia. L’accesso senza gradini è disponibile da North Street.
Carica mappa interattiva · Apri indicazioni in un’app di mappe

Funziona perché il visitatore può identificare, copiare e raggiungere il luogo senza l’embed. La nota sull’ingresso risolve una reale ambiguità di arrivo. Caricare la terza parte è una scelta, ed entrambe le azioni dichiarano chiaramente cosa accade.

Cattivo

Trovaci qui!
`[mappa interattiva a tutta larghezza con un segnaposto non etichettato]]

Fallisce perché “qui” non identifica un luogo, l’indirizzo esiste solo all’interno dei pixel del fornitore e il segnaposto potrebbe rappresentare un codice postale piuttosto che un ingresso. La mappa eager aggiunge costi anche per i visitatori che non la usano. Non c’è fallback, data di verifica, nota di arrivo o collegamento di navigazione accessibile. Aggiungere un indirizzo al title dell’iframe migliorerebbe l’etichetta del frame ma non creerebbe testo di pagina selezionabile.

Markup schema e accessibilità

Un blocco mappa non ha un tipo Schema.org dedicato. I campi verificati possono alimentare le opportune Organization, sottotipo LocalBusiness, Place, PostalAddress o GeoCoordinates quando la pagina rappresenta quell’entità. Usa un record di posizione condiviso; l’indirizzo visibile, il segnaposto, l’URL canonico della sede e il JSON-LD devono concordare.

Non aggiungere hasMap solo per far sembrare la pagina più completa. Quando usato, dovrebbe puntare a un URL mappa stabile per lo stesso luogo, non a un URL di sessione in scadenza o a un endpoint iframe con una chiave esposta. Un’azienda con area di servizio senza una sede pubblica per i clienti dovrebbe descrivere onestamente la propria area di servizio e non deve pubblicare locali inventati o coordinate private eccessivamente precise.

L’accessibilità inizia con l’indipendenza dalla mappa. Inserisci il nome del luogo e l’indirizzo completo in HTML, usando <address> solo per le informazioni di contatto rilevanti. Fornisci un normale collegamento per le indicazioni. Descrivi ingressi, punti di riferimento, trasporti, parcheggio e accesso senza gradini nel testo. Il testo alternativo della mappa statica dovrebbe comunicare la conclusione utile, non elencare ogni strada.

Il controllo di caricamento deve essere un <button> operabile da tastiera con focus visibile e un nome accessibile legato al luogo. Il caricamento non deve spostare il focus inaspettatamente. Dopo l’attivazione, annuncia un breve stato come “Mappa interattiva caricata,” quindi mantieni il focus sul controllo iniziatore o spostalo solo quando l’interfaccia ha un punto di ingresso da tastiera documentato. Assegna a ogni iframe un titolo univoco, ad esempio “Mappa stradale interattiva per North Street Clinic.”

I controlli del fornitore devono rimanere operabili a larghezze ridotte e zoom al 200%. Non intrappolare il focus della tastiera all’interno dell’iframe. Non fare affidamento sul colore del segnaposto, sui gesti di trascinamento, sull’hover o sulle etichette stradali visive per informazioni essenziali. Se la mappa fallisce o il consenso viene rifiutato, mantieni stabile la regione riservata ed esponi indirizzo, nota di arrivo, collegamento indicazioni esterno e azione di riprova.

Regole di scrittura

Inizia con il nome pubblico ufficiale del luogo in due-dieci parole. Segui con l’indirizzo postale completo come memorizzato nel record di posizione governato. Non abbreviare unità, edificio, località o codice postale necessari per raggiungere l’ingresso corretto. Includi il paese quando la pagina può ricevere traffico internazionale o quando il nome della città è ambiguo.

Aggiungi una nota di arrivo di 8–35 parole solo quando cambia ciò che il visitatore dovrebbe fare. Nomina un punto di riferimento durevole o una relazione di ingresso: “Usa l’ingresso del cortile accanto alla farmacia” è utile; “Non puoi sbagliare” non lo è. Chiusure stradali temporanee, percorsi di costruzione e ingressi temporanei necessitano di un proprietario e una data di revisione altrove nel sistema di contenuti.

Usa un blocco mappa per una destinazione selezionata. Un localizzatore può cambiare quella destinazione, ma ogni stato selezionato deve aggiornare atomicamente titolo, indirizzo, segnaposto, didascalia e collegamento. Mostra un segnaposto principale per impostazione predefinita. I punti di riferimento secondari possono apparire solo quando spiegano l’arrivo e sono visivamente distinguibili nel testo e nei controlli.

Mantieni le etichette dei controlli letterali: “Carica mappa interattiva,” “Apri indicazioni” e “Visualizza ingresso accessibile.” Evita etichette vaghe come “Esplora,” “Vedi altro” o “Clicca qui.” Indica il fornitore prima dell’attivazione quando una connessione ha implicazioni sulla privacy.

Non inserire mai numeri di telefono, orari di apertura, affermazioni promozionali, recensioni, prezzi, moduli di prenotazione o lunghe policy sui parcheggi all’interno della tela interattiva. Questi dati appartengono all’HTML e ai propri elementi tipizzati. Non pubblicare mai una chiave API, la posizione in tempo reale di un utente, un ingresso residenziale privato, segnaposto di uffici inventati, aree di servizio non verificate o coordinate copiate da un geocodificatore non controllato. La mappa non deve implicare un accesso per visitatori dove non esiste.

Verifica l’indirizzo e il segnaposto al momento della pubblicazione, dopo un cambio di posizione e durante la revisione programmata. Strade ed etichette del fornitore possono cambiare indipendentemente; l’organizzazione è comunque responsabile dell’accuratezza del proprio record di posizione e delle istruzioni di arrivo.

Tipi di post che lo utilizzano

Il campo postTypes del frontmatter è la fonte per questa matrice di implementazione.

Checklist QA

• Il nome del luogo e l’indirizzo completo appaiono come testo selezionabile renderizzato lato server al di fuori della mappa.
• Il segnaposto punta al punto di arrivo pubblico verificato, non a un codice postale o a un centro edificio.
• Indirizzo, coordinate, identificatore del luogo, collegamento indicazioni e dati strutturati provengono dallo stesso record governato.
• Il blocco spiega eventuali unità, piano, ingresso, regole di appuntamento o percorsi di accessibilità necessari per arrivare.
• L’implementazione predefinita evita richieste a terze parti fino all’attivazione esplicita o al consenso valido.
• Un’eccezione sempre caricata ha uno scopo documentato, una base per la privacy e un budget di prestazione misurato.
• Larghezza e proporzioni sono riservate prima del caricamento di immagine, iframe o codice del fornitore.
• Ogni percorso di immagine statica punta a un asset reale approvato e ha un testo alternativo utile.
• Il controllo di caricamento è un pulsante con un nome accessibile specifico per il luogo e focus visibile.
• L’iframe, quando creato, ha un titolo descrittivo univoco e non intrappola il focus della tastiera.
• Indirizzo, collegamento indicazioni, nota di arrivo e percorso di riprova rimangono utilizzabili quando script, consenso o fornitore falliscono.
• Le informazioni essenziali non dipendono dal colore del segnaposto, hover, trascinamento, zoom o etichette della mappa.
• Il layout funziona a larghezze ridotte e zoom al 200% senza coprire i controlli del fornitore.
• La pagina non rivendica un ufficio pubblico, ingresso o area di servizio che l’organizzazione non può verificare.
• Nessuna chiave API, token di accesso, posizione utente, coordinate private o URL iframe arbitrario appaiono nel contenuto creato dall’autore.
• Le implementazioni multi-sede mantengono un elenco testuale accessibile da tastiera e sincronizzano atomicamente la sede selezionata.
• Lo schema, se presente, descrive la stessa entità reale e lo stesso indirizzo mostrati ai visitatori.
• La data di verifica e il responsabile della revisione soddisfano la politica di manutenzione dei dati locali del sito.

Un blocco mappa ha successo quando perdere la mappa cambia la comodità, non il significato. Il lettore sa ancora dov’è il luogo, come raggiungerlo e cosa aspettarsi; il fornitore rimane opzionale.