کسی بھی سائٹ پر نقشہ ویجٹ کیسے ایمبیڈ کریں

بلڈر سے شروع کریں (اصل کام صرف یہی ہے)

سب کچھ نقشہ-ایمبیڈ بلڈر سے شروع ہوتا ہے۔ جیوکوڈنگ ایک بار، وہیں ہوتی ہے — جو سنیپٹ آپ کاپی کرتے ہیں اس میں کوآرڈینیٹس طے شدہ ہوتے ہیں، اس لیے جیوکوڈر کی خرابی یا “پتے کی نارملائزیشن” بعد میں آپ کا پن ہلا نہیں سکتی۔ پتہ لکھیں، پن کو جگہ پر آتے دیکھیں، پھر کاپی کرنے سے پہلے اسے کھینچ کر اپنے اصل دروازے پر رکھیں: دس سیکنڈ کا یہ کھینچنا “صحیح سڑک” اور “صحیح دروازہ” کے درمیان فرق ہے۔

اپنا سیٹ اپ بنانے سے پہلے متعدد برانچوں والا مکمل نمونہ دیکھنا چاہتے ہیں؟ بلڈر ڈیمو کھولیں — یہ تین برانچوں والی نمونہ کمپنی لوڈ کرتا ہے: پتے، رنگین نمبر والے پن اور مقامات کا پینل، سب پیش نظارے میں چلتے ہوئے اور آزمانے کے لیے تیار۔

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/ایمبیڈ عنصر شامل کریں (Wix Embed HTML، Squarespace Code بلاک، Webflow Embed) اور iframe اس میں رکھ دیں۔ ایک فرق نقشہ ویجٹ کو لوکیشن ویجٹ سے آسان بنا دیتا ہے: اسے allow="geolocation" ایٹریبیوٹ کی ضرورت نہیں، کیونکہ یہ آنے والوں سے کچھ نہیں مانگتا — تو جب پیج بلڈر آپ کا HTML دوبارہ لکھتا ہے تو بچانے کے لیے کوئی نازک چیز باقی نہیں رہتی۔

Squarespace: ایک Code بلاک شامل کریں اور پیسٹ کریں۔ ایک بات پہلے سے جان لینا مفید ہے: Code بلاکس کے لیے Business پلان یا اس سے اوپر ضروری ہے — Personal پلان پر بلاک آپ کا کوڈ رینڈر کرنے کے بجائے سادہ متن کے طور پر دکھاتا ہے۔

Shopify پیسٹ سے بہتر کا حق دار ہے: ہم تیار تھیم سیکشن دیتے ہیں — آپ کے تھیم میں ایک فائل آپ کو نیٹو سیٹنگز پینل دیتی ہے، جس میں برانچیں کھینچ کر ترتیب بدلنے والے بلاکس کی شکل میں ہوتی ہیں؛ نہ ایپ، نہ API کلید۔

Notion اور Google Sites URL سے ایمبیڈ کرتے ہیں، HTML سے نہیں۔ وہ 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 دبائیں۔ آنے والوں کو مقامات کا پینل ملتا ہے — ڈیسک ٹاپ پر نقشے کے پہلو میں ایکارڈین، فون پر سوائپ ہونے والی کارڈ پٹی — نمبر والے پنوں کے ساتھ: کوئی برانچ چننے پر نقشہ اُڑ کر وہاں پہنچتا ہے اور اس کا پتہ اپنے الگ راستے کے لنک کے ساتھ دکھاتا ہے۔

• panel= لے آؤٹ چنتا ہے: auto (طے شدہ — چوڑے iframe میں پہلو میں، تنگ میں پٹی)، side، bottom، یا سادہ پن + پاپ اپ کے لیے none۔
• motion= تبدیلی کی اینیمیشن طے کرتا ہے: smooth (طے شدہ اُڑان)، fade، lively، یا none۔ جن آنے والوں کے سسٹم میں “حرکت کم کریں” آن ہے انہیں ہمیشہ فوری صورت ملتی ہے، آپ جو بھی چنیں۔
• open=no ہر اندراج کو بند حالت میں شروع کرتا ہے؛ نقشہ خود بخود تمام برانچوں کو سما لیتا ہے اور آپ کا zoom زیادہ سے زیادہ حد بن جاتا ہے۔

آپشنز کا حوالہ

WordPress کے مسائل کا حل

شارٹ کوڈ صفحے پر لفظی متن کے طور پر دکھتا ہے۔ وہ بلاک شارٹ کوڈ پروسیس نہیں کرتا۔ بلاک ایڈیٹر میں Shortcode بلاک استعمال کریں (کوڈ یا preformatted بلاک نہیں)؛ Elementor میں اس کا Shortcode ویجٹ، Divi میں Code ماڈیول۔ کلاسک ایڈیٹر والے: اسے Visual ٹیب میں سادہ متن کے طور پر لکھیں۔

کچھ بھی ظاہر نہیں ہوتا۔ صفحے کا سورس دیکھیں اور whatismylocation تلاش کریں۔ lat/lng کے غائب ہونے سے متعلق HTML تبصرہ ہو تو کوآرڈینیٹس موجود نہیں یا غلط ہیں — ایٹریبیوٹس ہاتھ سے لکھنے کے بجائے بلڈر سے پورا شارٹ کوڈ کاپی کریں۔

محفوظ کرنے پر iframe غائب ہو جاتا ہے (بغیر پلگ اِن والا راستہ)۔ WordPress ان صارف رولز کے لیے iframe ہٹا دیتا ہے جن کے پاس unfiltered_html صلاحیت نہ ہو — ملٹی سائٹ پر طے شدہ طور پر اس میں ایڈمن بھی شامل ہیں — اور کچھ سیکیورٹی پلگ اِن بھی یہی کرتے ہیں۔ پلگ اِن شارٹ کوڈ صاف حل ہے: یہ اس بات پر منحصر نہیں کہ آپ کے رول کو سادہ iframe محفوظ کرنے کی اجازت ہے یا نہیں۔

نقشہ سرمئی ہے / ٹائلیں لوڈ نہیں ہوتیں۔ ٹائلیں tile.openstreetmap.org سے آتی ہیں؛ بہت سخت ایڈ-بلاکر یا دفتری نیٹ ورک انہیں بلاک کر سکتا ہے (اوورلے کارڈ پھر بھی رینڈر ہوتا ہے)۔ کسی دوسرے نیٹ ورک یا موبائل ڈیٹا پر فون سے تصدیق کریں۔

مقامات کا پینل نہیں دکھتا۔ پینل 2 پن سے شروع ہو کر ظاہر ہوتا ہے — ایک مقام کو کلاسک اوورلے کارڈ ملتا ہے۔ یہ بھی دیکھیں کہ panel="none" سیٹ نہ ہو۔

تبدیلی کی اینیمیشن نہیں چلتی۔ تقریباً ہمیشہ اس کی وجہ آنے والے کے (یا آپ کے اپنے) آپریٹنگ سسٹم کی “حرکت کم کریں” سیٹنگ ہوتی ہے — ویجٹ جان بوجھ کر اس کا احترام کرتا ہے اور فوراً بدل دیتا ہے۔ یہ خرابی نہیں، اور باقی آنے والوں کو آپ کا چنا ہوا پریسیٹ نظر آتا رہتا ہے۔

ترامیم نظر نہیں آتیں۔ کوئی کیشنگ پلگ اِن (یا ہوسٹ کیش) پرانا صفحہ دکھا رہا ہے۔ شارٹ کوڈ کے ایٹریبیوٹس بدلنے کے بعد پیج کیش پرج کریں — ویجٹ میں خود کیش کرنے کے لیے کچھ نہیں ہوتا۔