ఏ సైట్‌లోనైనా మ్యాప్ విడ్జెట్‌ను ఎలా ఎంబెడ్ చేయాలి

బిల్డర్‌తో మొదలుపెట్టండి (అసలు పని ఇదొక్కటే)

ప్రతిదీ మ్యాప్-ఎంబెడ్ బిల్డర్తో మొదలవుతుంది. జియోకోడింగ్ ఒక్కసారే, అక్కడే జరుగుతుంది — మీరు కాపీ చేసే స్నిప్పెట్ స్థిర నిర్దేశాంకాలను మోసుకెళ్తుంది. అందుకే జియోకోడర్ ఆగిపోయినా, “చిరునామా నార్మలైజేషన్” జరిగినా మీ పిన్ తర్వాత కదలదు. చిరునామా టైప్ చేయండి, పిన్ ఎక్కడ పడుతుందో చూడండి, కాపీ చేయడానికి ముందు దాన్ని మీ నిజమైన ప్రవేశ ద్వారం మీదకు లాగండి: ఆ పది సెకన్ల లాగుడే “సరైన వీధి”కి, “సరైన తలుపు”కి మధ్య తేడా.

మీది తయారు చేయకముందే పూర్తయిన బహుళ-శాఖల సెటప్‌ను చూడాలనుకుంటున్నారా? బిల్డర్ డెమోను తెరవండి — ఇది మూడు శాఖల నమూనా కంపెనీని లోడ్ చేస్తుంది: చిరునామాలు, రంగుల నంబర్ పిన్‌లు, ప్రివ్యూలో లైవ్‌గా ఉన్న స్థానాల ప్యానెల్ — వెంటనే ప్రయత్నించవచ్చు.

WordPress: ప్లగిన్ షార్ట్‌కోడ్ లేదా నేరుగా iframe?

రెండు మార్గాలూ ఒకే విడ్జెట్‌తో ముగుస్తాయి — మీ ఇష్టం ప్రకారం ఎంచుకోండి.

ప్లగిన్ మార్గం (సిఫారసు): whatismylocation-widget.zip డౌన్‌లోడ్ చేయండి → wp-admin ▸ Plugins ▸ Add New ▸ Upload Plugin → Activate. ఆ తర్వాత ఒక Shortcode బ్లాక్ జోడించండి:

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

అట్రిబ్యూట్‌లు బిల్డర్ ఆప్షన్‌ల లాగే ఉంటాయి: theme, marker, zoom, height, directions, శాఖల కోసం pins="lat,lng,Label~Address|…", వాటితో పాటు panel= మరియు motion= (కింది రిఫరెన్స్ పట్టిక చూడండి). బిల్డర్‌లోని WordPress విభాగం పూర్తి షార్ట్‌కోడ్‌ను మీ కోసం తయారు చేస్తుంది — టైప్ చేయాల్సిన పని లేదు.

ప్లగిన్ లేని మార్గం: బిల్డర్ నుంచి iframeను Custom HTML బ్లాక్‌లో అతికించండి. అదే విడ్జెట్, అప్‌డేట్ చేయాల్సిన ప్లగిన్ ఉండదు; బదులుగా మీ కంటెంట్‌లో మార్కప్ పొడవుగా ఉంటుంది, తర్వాత అట్రిబ్యూట్ శైలిలో మార్పులు చేయలేరు.

Squarespace, Shopify, Notion — మిగతావన్నీ

WordPress బయట సాధారణంగా ఒక్క పేస్ట్ చాలు: మీ ప్లాట్‌ఫారమ్ HTML/embed ఎలిమెంట్ జోడించి (Wix Embed HTML, Squarespace Code బ్లాక్, Webflow Embed) iframeను అందులో వేయండి. లొకేషన్ విడ్జెట్ కంటే మ్యాప్ విడ్జెట్‌ను సులభం చేసే ఒక తేడా ఉంది: దీనికి allow="geolocation" అట్రిబ్యూట్ అవసరం లేదు, ఎందుకంటే ఇది సందర్శకులను ఎప్పుడూ ఏమీ అడగదు — కాబట్టి పేజీ బిల్డర్ మీ HTMLను తిరగరాసినప్పుడు కాపాడుకోవాల్సిన సున్నితమైనది ఏదీ ఉండదు.

Squarespace: ఒక Code బ్లాక్ జోడించి అతికించండి. ముందే తెలుసుకోవాల్సిన ఒక విషయం: Code బ్లాక్‌లకు Business ప్లాన్ లేదా ఆపైన అవసరం — Personal ప్లాన్‌లో ఆ బ్లాక్ మీ కోడ్‌ను రెండర్ చేయకుండా సాదా టెక్స్ట్‌గా చూపిస్తుంది.

Shopifyకి పేస్ట్ కంటే మెరుగైనది ఉంది: మేము సిద్ధంగా ఉన్న థీమ్ సెక్షన్ ఇస్తున్నాం — మీ థీమ్‌లో ఒక ఫైల్ చాలు. లాగి క్రమం మార్చగల బ్లాక్‌లుగా శాఖలతో నేటివ్ సెట్టింగ్‌ల ప్యానెల్ వస్తుంది, యాప్ అవసరం లేదు, API కీ అవసరం లేదు.

Notion, Google Sites HTML ద్వారా కాదు, URL ద్వారా ఎంబెడ్ చేస్తాయి. అవి iframe స్నిప్పెట్‌ను అస్సలు అంగీకరించవు — బదులుగా బిల్డర్లో Copy widget URL నొక్కి, దాన్ని Notion యొక్క /embed బ్లాక్‌లో లేదా Google Sites Embed ▸ By URLలో అతికించండి. విడ్జెట్ పూర్తి స్వతంత్ర పేజీ, కాబట్టి ఏ విధంగానైనా చక్కగా రెండర్ అవుతుంది.

Salesforce Experience Cloud (పబ్లిక్ కమ్యూనిటీ సైట్‌లు): iframeను HTML Editor కాంపోనెంట్‌లో వేయండి — ఆ తర్వాత Setup ▸ Trusted URLsలో whatismylocation.aiను frame-src CSP డైరెక్టివ్‌తో జోడించమని మీ అడ్మిన్‌ను అడగండి, లేకపోతే Salesforce ఫ్రేమ్‌ను నిశ్శబ్దంగా బ్లాక్ చేస్తుంది. కోడ్‌తో పని చేసే బృందాలు అదే URLను సుమారు 10 లైన్ల Lightning Web Componentలో చుట్టవచ్చు:

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

బహుళ శాఖలు: స్థానాల ప్యానెల్

ఒకే ఎంబెడ్‌లో గరిష్ఠంగా 10 స్థానాలు పడతాయి. బిల్డర్‌లోని Advanced మోడ్‌లో ప్రతి పిన్‌ను ఉంచి, దానికి లేబుల్ మరియు చిరునామా ఇచ్చి, Add location నొక్కండి. సందర్శకులకు స్థానాల ప్యానెల్ కనిపిస్తుంది — డెస్క్‌టాప్‌లో మ్యాప్ పక్కన అకార్డియన్, ఫోన్‌లలో స్వైప్ చేయగల కార్డుల వరుస — నంబర్ ఉన్న పిన్‌లతో. ఒక శాఖను ఎంచుకుంటే మ్యాప్ దాని దగ్గరకు ఎగిరి వెళ్ళి, దాని చిరునామాను దాని సొంత Get-directions లింక్‌తో చూపిస్తుంది.

• panel= లేఅవుట్‌ను ఎంచుకుంటుంది: auto (డిఫాల్ట్ — వెడల్పైన iframeలలో పక్కన, ఇరుకైన వాటిలో వరుసగా), side, bottom, లేదా సాదా పిన్‌లు + పాప్‌అప్‌ల కోసం none.
• motion= మారే యానిమేషన్‌ను నిర్ణయిస్తుంది: smooth (డిఫాల్ట్ ఫ్లై), fade, lively, లేదా none. తమ సిస్టమ్‌లో “reduce motion” సెట్ చేసుకున్న సందర్శకులకు మీరు ఏది ఎంచుకున్నా తక్షణ వెర్షనే వస్తుంది.
• open=no పెడితే అన్ని ఎంట్రీలూ మూసుకుని మొదలవుతాయి; మ్యాప్ అన్ని శాఖలకూ తనంతట తానే సరిపోయేలా సర్దుకుంటుంది, మీ zoom గరిష్ఠ విలువ అవుతుంది.

ఆప్షన్ల రిఫరెన్స్

WordPress సమస్యల పరిష్కారం

షార్ట్‌కోడ్ పేజీలో అక్షరాలుగానే కనిపిస్తోంది. ఆ బ్లాక్ షార్ట్‌కోడ్‌లను ప్రాసెస్ చేయదు. బ్లాక్ ఎడిటర్‌లో Shortcode బ్లాక్ వాడండి (కోడ్ లేదా ప్రిఫార్మాటెడ్ బ్లాక్ కాదు); Elementorలో దాని Shortcode విడ్జెట్, Diviలో Code మాడ్యూల్ వాడండి. క్లాసిక్ ఎడిటర్ వాడేవారు: Visual ట్యాబ్‌లో సాదా టెక్స్ట్‌గా టైప్ చేయండి.

ఏమీ కనిపించడం లేదు. పేజీ సోర్స్ చూసి whatismylocation కోసం వెతకండి. lat/lng లేవని HTML కామెంట్ కనిపిస్తే నిర్దేశాంకాలు లేవు లేదా చెల్లనివి — అట్రిబ్యూట్‌లను చేతితో టైప్ చేయకుండా బిల్డర్ నుంచి పూర్తి షార్ట్‌కోడ్‌ను కాపీ చేయండి.

సేవ్ చేసినప్పుడు iframe మాయమవుతోంది (ప్లగిన్ లేని మార్గం). unfiltered_html అనుమతి లేని యూజర్ రోల్స్‌కు WordPress iframeలను తొలగిస్తుంది — మల్టీసైట్‌లో డిఫాల్ట్‌గా అడ్మిన్‌లు కూడా ఇందులో వస్తారు — కొన్ని సెక్యూరిటీ ప్లగిన్‌లూ అదే చేస్తాయి. ప్లగిన్ షార్ట్‌కోడ్ శుభ్రమైన పరిష్కారం: ముడి iframeలను సేవ్ చేసే అనుమతి మీ రోల్‌కు ఉందా లేదా అనేదానిపై అది ఆధారపడదు.

మ్యాప్ బూడిద రంగులో ఉంది / టైల్స్ లోడ్ కావడం లేదు. టైల్స్ tile.openstreetmap.org నుంచి వస్తాయి; చాలా కఠినమైన యాడ్-బ్లాకర్ లేదా కార్పొరేట్ నెట్‌వర్క్ వాటిని బ్లాక్ చేయవచ్చు (ఓవర్‌లే కార్డు మాత్రం కనిపిస్తుంది). వేరే నెట్‌వర్క్‌లో లేదా మొబైల్ డేటాలో ఫోన్‌తో సరిచూసుకోండి.

స్థానాల ప్యానెల్ రావడం లేదు. ప్యానెల్ 2 పిన్‌ల నుంచి పైకి కనిపిస్తుంది — ఒకే స్థానానికి క్లాసిక్ ఓవర్‌లే కార్డు వస్తుంది. అలాగే panel="none" సెట్ చేయలేదని సరిచూసుకోండి.

మారే యానిమేషన్ ఆడటం లేదు. దాదాపు ఎప్పుడూ సందర్శకుల (లేదా మీ సొంత) ఆపరేటింగ్ సిస్టమ్‌లోని “reduce motion” సెట్టింగే కారణం — విడ్జెట్ దాన్ని ఉద్దేశపూర్వకంగా గౌరవించి తక్షణం మారుతుంది. ఇది బగ్ కాదు, మిగతా సందర్శకులకు మీరు ఎంచుకున్న ప్రీసెట్ కనిపిస్తూనే ఉంటుంది.

మార్పులు కనిపించడం లేదు. కాషింగ్ ప్లగిన్ (లేదా హోస్ట్ కాష్) పాత పేజీని ఇస్తోంది. షార్ట్‌కోడ్ అట్రిబ్యూట్‌లు మార్చాక పేజీ కాష్‌ను ఖాళీ చేయండి — విడ్జెట్‌లో కాష్ చేయడానికి ఏమీ ఉండదు.