Paano i-embed ang map widget sa kahit anong site

Magsimula sa builder (ito lang ang tunay na trabaho)

Nagsisimula ang lahat sa map-embed builder. Nangyayari ang geocoding nang isang beses, doon — ang snippet na kokopyahin mo ay may nakapirming coordinates, kaya hindi na maigagalaw ng geocoder outage o “address normalization” ang pin mo mamaya. I-type ang address, tingnan kung saan dumapo ang pin, tapos i-drag ito sa aktuwal mong pasukan bago kopyahin: ang sampung segundong drag na iyon ang pagkakaiba ng “tamang kalye” at “tamang pinto”.

Gusto mong makita ang tapos nang multi-branch setup bago mo gawin ang sa iyo? Buksan ang demo ng builder — naglo-load ito ng sample na kompanyang may tatlong sangay, may mga address, may kulay at numeradong pin, at buhay ang locations panel sa preview, handang subukan.

WordPress: plugin shortcode o raw iframe?

Pareho ang widget na lalabas sa dalawang ruta — pumili ayon sa gusto mo.

Ruta ng plugin (rekomendado): i-download ang whatismylocation-widget.zip → wp-admin ▸ Plugins ▸ Add New ▸ Upload Plugin → Activate. Pagkatapos, magdagdag ng Shortcode block:

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

Katulad ng mga opsyon sa builder ang mga attribute: theme, marker, zoom, height, directions, at para sa mga sangay pins="lat,lng,Label~Address|…" kasama ang panel= at motion= (tingnan ang reference table sa ibaba). Ginagawa na ng WordPress section ng builder ang kumpletong shortcode para sa iyo — hindi mo na kailangang mag-type.

Ruta na walang plugin: i-paste ang iframe mula sa builder sa isang Custom HTML block. Pareho ang widget, at walang plugin na i-a-update; ang kapalit ay mas mahabang markup sa content mo at walang pag-edit sa istilong attribute mamaya.

Squarespace, Shopify, Notion — at ang iba pa

Sa labas ng WordPress, isang paste lang karaniwan ang trabaho: idagdag ang HTML/embed element ng platform mo (Wix Embed HTML, Squarespace Code block, Webflow Embed) at ilagay ang iframe. May isang pagkakaibang mas madali ang map widget kaysa sa location widget: hindi nito kailangan ang allow="geolocation" attribute, dahil wala itong hinihingi sa mga bisita — kaya walang marupok na bahaging kailangang protektahan kapag binago ng page builder ang HTML mo.

Squarespace: magdagdag ng Code block at i-paste. May isang bagay na dapat mong malaman agad: kailangan ng Business plan o mas mataas para sa Code blocks — sa Personal plan, ipinapakita ng block ang code mo bilang plain text sa halip na i-render ito.

Mas nararapat sa Shopify ang higit pa sa isang paste: may handa kaming theme section — isang file sa theme mo ang nagbibigay ng native settings panel na may mga sangay bilang drag-to-reorder na block, walang app at walang API key.

Ang Notion at Google Sites ay nag-e-embed sa pamamagitan ng URL, hindi HTML. Hindi talaga nila tatanggapin ang iframe snippet — sa halip, pindutin ang Copy widget URL sa builder at i-paste ito sa /embed block ng Notion o sa Embed ▸ By URL ng Google Sites. Buo at standalone na page ang widget, kaya perpekto itong nagre-render sa alinmang paraan.

Salesforce Experience Cloud (mga pampublikong community site): ilagay ang iframe sa isang HTML Editor component — pagkatapos, ipadagdag sa admin mo ang whatismylocation.ai sa Setup ▸ Trusted URLs gamit ang frame-src CSP directive, kung hindi ay tahimik na haharangin ng Salesforce ang frame. Ang mga team na gumagamit ng code ay puwedeng ibalot ang parehong URL sa isang Lightning Web Component na mga 10 linya lang:

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

Maraming sangay: ang locations panel

Hanggang 10 lokasyon ang kasya sa isang embed. Sa Advanced mode ng builder, ilagay sa posisyon ang bawat pin, bigyan ito ng label at address, at pindutin ang Add location. Makakakita ang mga bisita ng locations panel — isang accordion sa tabi ng mapa sa desktop, at swipeable na card strip sa telepono — na may numeradong pin: kapag pumili ng sangay, lilipad ang mapa papunta rito at ipapakita ang address nito kasama ang sariling Get-directions link nito.

• panel= ang pumipili ng layout: auto (default — sa gilid kapag malapad ang iframe, strip kapag makitid), side, bottom, o none para sa payak na pin + popup.
• motion= ang nagtatakda ng animation sa paglipat: smooth (default na fly), fade, lively, o none. Ang mga bisitang may nakatakdang “reduce motion” sa kanilang sistema ay laging makakakuha ng instant na bersyon, kahit ano pa ang piliin mo.
• open=no ang nagsisimula nang nakatiklop ang bawat entry; awtomatikong ini-fit ng mapa ang lahat ng sangay at ang zoom mo ang nagiging maximum.

Reference ng mga opsyon

Pag-troubleshoot sa WordPress

Lumalabas ang shortcode bilang literal na teksto sa page. Hindi nagpoproseso ng shortcode ang block na iyon. Sa block editor, gumamit ng Shortcode block (hindi code o preformatted block); sa Elementor gamitin ang Shortcode widget nito, sa Divi ang Code module. Sa classic editor: i-type ito sa Visual tab bilang plain text.

Walang lumalabas na kahit ano. Tingnan ang page source at hanapin ang whatismylocation. Kung may HTML comment tungkol sa nawawalang lat/lng, ibig sabihin walang coordinates o hindi ito wasto — kopyahin ang kumpletong shortcode mula sa builder sa halip na i-type nang manu-mano ang mga attribute.

Nawawala ang iframe kapag nag-save ka (ruta na walang plugin). Tinatanggal ng WordPress ang mga iframe para sa mga user role na walang unfiltered_html capability — sa multisite, kasama rito ang mga admin bilang default — at ganoon din ang ginagawa ng ilang security plugin. Ang plugin shortcode ang malinis na solusyon: hindi ito umaasa sa pahintulot ng role mo na mag-save ng raw iframe.

Kulay abo ang mapa / hindi naglo-load ang tiles. Galing sa tile.openstreetmap.org ang tiles; puwedeng harangin ito ng napakahigpit na ad-blocker o ng corporate network (nagre-render pa rin ang overlay card). Kumpirmahin sa ibang network o sa telepono na nakamobile data.

Walang locations panel. Lumalabas ang panel mula sa 2 pin pataas — ang iisang lokasyon ay nakakakuha ng klasikong overlay card. Tingnan din kung hindi naka-set ang panel="none".

Hindi gumagana ang animation sa paglipat. Halos palaging ang “reduce motion” setting ng operating system ng bisita (o ng iyo) ang dahilan — sinusunod ito ng widget bilang disenyo at agad na lumilipat. Hindi ito bug, at nakikita pa rin ng ibang bisita ang piniling preset mo.

Hindi lumalabas ang mga binago mo. May caching plugin (o host cache) na naghahain ng lumang page. I-purge ang page cache pagkatapos i-edit ang mga attribute ng shortcode — walang ica-cache ang widget mismo.