Come incorporare un widget mappa su qualsiasi sito

Si parte dal builder (l'unico lavoro vero)

Tutto comincia dal builder di embed della mappa. La geocodifica avviene una volta sola, lì — lo snippet che copi contiene coordinate fisse, quindi un guasto del geocoder o una “normalizzazione dell'indirizzo” non potrà più spostare il tuo pin. Digita l'indirizzo, guarda il pin atterrare, poi trascinalo sul tuo ingresso reale prima di copiare: quei dieci secondi di trascinamento sono la differenza tra “la via giusta” e “la porta giusta”.

Vuoi vedere una configurazione multi-sede già finita prima di creare la tua? Apri la demo del builder — carica un'azienda di esempio con tre sedi, con indirizzi, pin numerati e colorati e il pannello delle sedi attivo nell'anteprima, pronto da esplorare.

WordPress: shortcode del plugin o iframe grezzo?

Entrambe le strade portano allo stesso identico widget — scegli per gusto.

Percorso con plugin (consigliato): scarica whatismylocation-widget.zip → wp-admin ▸ Plugin ▸ Aggiungi nuovo ▸ Carica plugin → Attiva. Poi aggiungi un blocco Shortcode:

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

Gli attributi seguono le opzioni del builder: theme, marker, zoom, height, directions e, per le sedi, pins="lat,lng,Label~Address|…" con panel= e motion= (vedi la tabella di riferimento qui sotto). La sezione WordPress del builder genera lo shortcode completo al posto tuo — niente da digitare.

Percorso senza plugin: incolla l'iframe del builder in un blocco HTML personalizzato. Stesso widget, nessun plugin da aggiornare; in cambio hai un markup più lungo nei contenuti e nessuna modifica successiva tramite attributi.

Squarespace, Shopify, Notion — e tutti gli altri

Fuori da WordPress di solito basta un incolla: aggiungi l'elemento HTML/embed della tua piattaforma (Wix Embed HTML, blocco Code di Squarespace, Embed di Webflow) e inserisci l'iframe. Una differenza rende il widget mappa più semplice del widget posizione: non gli serve l'attributo allow="geolocation", perché non chiede mai nulla ai visitatori — quindi non c'è niente di fragile da preservare quando un page builder riscrive il tuo HTML.

Squarespace: aggiungi un blocco Code e incolla. Un dettaglio da sapere subito: i blocchi Code richiedono il piano Business o superiore — con il piano Personal il blocco mostra il codice come testo semplice invece di eseguirlo.

Shopify merita di meglio di un semplice incolla: forniamo una sezione del tema già pronta — un file nel tuo tema ti dà un pannello di impostazioni nativo, con le sedi come blocchi riordinabili trascinandoli, senza app e senza chiave API.

Notion e Google Sites incorporano tramite URL, non tramite HTML. Non accettano affatto uno snippet iframe — premi invece Copia URL del widget nel builder e incollalo nel blocco /embed di Notion o in Incorpora ▸ Da URL di Google Sites. Il widget è una pagina autonoma completa, quindi si visualizza perfettamente in entrambi i casi.

Salesforce Experience Cloud (siti community pubblici): inserisci l'iframe in un componente HTML Editor — poi fai aggiungere dal tuo amministratore whatismylocation.ai in Setup ▸ Trusted URLs con la direttiva CSP frame-src, altrimenti Salesforce blocca il frame senza dire nulla. I team che lavorano con il codice possono avvolgere lo stesso URL in un Lightning Web Component di una decina di righe:

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

Più sedi: il pannello delle sedi

In un solo embed stanno fino a 10 sedi. Nella modalità Avanzata del builder posiziona ogni pin, dagli un'etichetta e un indirizzo, poi premi Aggiungi sede. I visitatori ottengono un pannello delle sedi — una fisarmonica accanto alla mappa su desktop, una striscia di schede scorrevole su telefono — con pin numerati: scegliendo una sede la mappa vola su di essa e ne mostra l'indirizzo con il proprio link per le indicazioni stradali.

• panel= sceglie il layout: auto (predefinito — laterale su iframe larghi, striscia su quelli stretti), side, bottom oppure none per soli pin con popup.
• motion= imposta l'animazione del cambio sede: smooth (il volo predefinito), fade, lively o none. Chi ha attivato “riduci animazioni” nel proprio sistema riceve sempre la versione istantanea, qualunque cosa tu scelga.
• open=no parte con tutte le voci chiuse; la mappa inquadra automaticamente tutte le sedi e il tuo zoom diventa il massimo.

Riferimento delle opzioni

Risoluzione dei problemi su WordPress

Lo shortcode compare come testo sulla pagina. Quel blocco non elabora gli shortcode. Nell'editor a blocchi usa un blocco Shortcode (non un blocco codice o preformattato); in Elementor usa il widget Shortcode, in Divi un modulo Code. Con l'editor classico: scrivilo nella scheda Visuale come testo semplice.

Non appare proprio nulla. Apri il sorgente della pagina e cerca whatismylocation. Un commento HTML che segnala lat/lng mancanti significa che le coordinate sono assenti o non valide — copia lo shortcode completo dal builder invece di digitare gli attributi a mano.

L'iframe sparisce quando salvi (percorso senza plugin). WordPress rimuove gli iframe per i ruoli utente privi della capacità unfiltered_html — su multisito questo include gli amministratori per impostazione predefinita — e alcuni plugin di sicurezza fanno lo stesso. Lo shortcode del plugin è la soluzione pulita: non dipende dal fatto che il tuo ruolo possa salvare iframe grezzi.

La mappa è grigia / le tile non si caricano. Le tile arrivano da tile.openstreetmap.org; un ad-blocker molto aggressivo o una rete aziendale possono bloccarle (la scheda in overlay viene comunque mostrata). Verifica su un'altra rete o da telefono in rete mobile.

Nessun pannello delle sedi. Il pannello compare da 2 pin in su — una sede singola ottiene la classica scheda in overlay. Controlla anche che non sia impostato panel="none".

L'animazione del cambio non parte. Quasi sempre è l'impostazione “riduci animazioni” del sistema operativo del visitatore (o del tuo) — il widget la rispetta per scelta e passa da una sede all'altra all'istante. Non è un bug, e gli altri visitatori vedono comunque il preset che hai scelto.

Le modifiche non si vedono. Un plugin di cache (o la cache dell'hosting) sta servendo la vecchia pagina. Svuota la cache della pagina dopo aver modificato gli attributi dello shortcode — il widget in sé non ha nulla da mettere in cache.