Cum incorporezi un widget de hartă pe orice site

Începe în generator (singura muncă reală)

Totul începe cu generatorul de hărți încorporate. Geocodarea are loc o singură dată, acolo — fragmentul pe care îl copiezi conține coordonate fixe, așa că o pană a geocodorului sau o „normalizare a adresei” nu îți mai poate muta pinul mai târziu. Scrie adresa, urmărește unde aterizează pinul, apoi trage-l pe intrarea ta reală înainte de a copia: acele zece secunde de tras fac diferența dintre „strada corectă” și „ușa corectă”.

Vrei să vezi o configurație gata făcută, cu mai multe filiale, înainte să o construiești pe a ta? Deschide demonstrația generatorului — încarcă o firmă exemplu cu trei filiale, cu adrese, pini numerotați și colorați și panoul de locații live în previzualizare, pregătit de explorat.

WordPress: shortcode din plugin sau iframe simplu?

Ambele variante duc la exact același widget — alege după gust.

Varianta cu plugin (recomandată): descarcă whatismylocation-widget.zip → wp-admin ▸ Plugins ▸ Add New ▸ Upload Plugin → Activate. Apoi adaugă un bloc Shortcode:

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

Atributele se citesc ca opțiunile din generator: theme, marker, zoom, height, directions, iar pentru filiale pins="lat,lng,Label~Address|…" împreună cu panel= și motion= (vezi tabelul de referință mai jos). Secțiunea WordPress din generator îți creează shortcode-ul complet — nu trebuie să scrii nimic.

Varianta fără plugin: lipește iframe-ul din generator într-un bloc Custom HTML. Același widget, fără plugin de actualizat. Compromisul este un cod mai lung în conținut și lipsa editării pe bază de atribute mai târziu.

Squarespace, Shopify, Notion — și restul

În afara WordPress, treaba se reduce de obicei la o singură lipire: adaugă elementul HTML/embed al platformei tale (Wix Embed HTML, blocul Code din Squarespace, Embed în Webflow) și pune iframe-ul acolo. O diferență face widgetul de hartă mai ușor decât widgetul de localizare: nu are nevoie de atributul allow="geolocation", pentru că nu cere niciodată nimic vizitatorilor — așa că nu există nimic fragil de păstrat atunci când un page builder îți rescrie codul HTML.

Squarespace: adaugă un bloc Code și lipește. Un detaliu de știut din start: blocurile Code cer planul Business sau superior — pe planul Personal, blocul îți arată codul ca text simplu, în loc să îl redea ca hartă.

Shopify merită mai mult decât o lipire: oferim o secțiune de temă gata făcută — un singur fișier în tema ta îți dă un panou de setări nativ, cu filialele ca blocuri pe care le reordonezi prin tragere, fără aplicație și fără cheie API.

Notion și Google Sites încorporează prin URL, nu prin HTML. Nu acceptă deloc un fragment de iframe. În schimb, apasă Copy widget URL în generator și lipește-l în blocul /embed din Notion sau în Embed ▸ By URL din Google Sites. Widgetul este o pagină completă, independentă, așa că se afișează perfect în ambele cazuri.

Salesforce Experience Cloud (site-uri comunitare publice): pune iframe-ul într-o componentă HTML Editor — apoi cere administratorului să adauge whatismylocation.ai la Setup ▸ Trusted URLs, cu directiva CSP frame-src. Altfel, Salesforce blochează cadrul în mod silențios. Echipele care lucrează cu cod pot împacheta același URL într-un Lightning Web Component de ~10 linii:

<!-- 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';
}

Mai multe filiale: panoul de locații

Într-o singură încorporare încap până la 10 locații. În modul Advanced al generatorului, poziționează fiecare pin, dă-i o etichetă și o adresă, apoi apasă Add location. Vizitatorii primesc un panou de locații — un acordeon lângă hartă pe desktop, o bandă de carduri glisabile pe telefon — cu pini numerotați: alegerea unei filiale duce harta spre ea și îi arată adresa, cu propriul link de indicații rutiere.

• panel= alege aspectul: auto (implicit — lateral pe iframe-uri late, bandă pe cele înguste), side, bottom sau none pentru pini simpli + popup-uri.
• motion= stabilește animația de comutare: smooth (zborul implicit), fade, lively sau none. Vizitatorii care au setat „reducerea animațiilor” în sistemul lor primesc mereu varianta instantanee, indiferent ce alegi tu.
• open=no pornește cu toate intrările pliate; harta încadrează automat toate filialele, iar zoom devine valoarea maximă.

Referință de opțiuni

Depanare pentru WordPress

Shortcode-ul apare ca text pe pagină. Blocul acela nu procesează shortcode-uri. În editorul de blocuri folosește un bloc Shortcode (nu un bloc de cod sau preformatat); în Elementor folosește widgetul Shortcode, în Divi un modul Code. Cine folosește editorul clasic: scrie-l ca text simplu în tabul Visual.

Nu apare absolut nimic. Deschide sursa paginii și caută whatismylocation. Un comentariu HTML despre lat/lng lipsă înseamnă că coordonatele lipsesc sau sunt invalide — copiază shortcode-ul complet din generator, în loc să scrii atributele de mână.

Iframe-ul dispare când salvezi (varianta fără plugin). WordPress elimină iframe-urile pentru rolurile de utilizator care nu au permisiunea unfiltered_html — pe multisite, aici intră implicit și administratorii — iar unele pluginuri de securitate fac același lucru. Shortcode-ul din plugin este soluția curată: nu depinde de dreptul rolului tău de a salva iframe-uri brute.

Harta e gri / dalele nu se încarcă. Dalele vin de la tile.openstreetmap.org; un ad-blocker foarte agresiv sau o rețea de firmă le poate bloca (cardul overlay se afișează totuși). Verifică din altă rețea sau de pe un telefon cu date mobile.

Nu apare panoul de locații. Panoul apare de la 2 pini în sus — o singură locație primește cardul overlay clasic. Verifică și să nu fie setat panel="none".

Animația de comutare nu pornește. Aproape mereu e vorba de setarea „reducerea animațiilor” din sistemul de operare al vizitatorului (sau al tău) — widgetul o respectă intenționat și comută instantaneu. Nu este o eroare, iar ceilalți vizitatori văd în continuare presetarea aleasă de tine.

Modificările nu se văd. Un plugin de cache (sau cache-ul găzduirii) livrează pagina veche. Golește cache-ul paginii după ce editezi atributele shortcode-ului — widgetul în sine nu are nimic de pus în cache.