किसी भी साइट पर मैप विजेट कैसे एम्बेड करें

बिल्डर से शुरू करें (असली काम बस यही है)

सब कुछ मैप-एम्बेड बिल्डर से शुरू होता है। जियोकोडिंग एक ही बार, वहीं होती है — आप जो स्निपेट कॉपी करते हैं उसमें कोऑर्डिनेट्स तय रहते हैं, इसलिए जियोकोडर की खराबी या “पते का नॉर्मलाइज़ेशन” बाद में आपका पिन हिला नहीं सकता। पता टाइप करें, पिन गिरता देखें, और कॉपी करने से पहले उसे खींचकर अपने असली प्रवेश-द्वार पर रखें: दस सेकंड का यह ड्रैग ही “सही सड़क” और “सही दरवाज़े” का फ़र्क़ है।

अपना सेटअप बनाने से पहले तैयार मल्टी-ब्रांच उदाहरण देखना चाहते हैं? बिल्डर डेमो खोलें — इसमें तीन ब्रांच वाली सैंपल कंपनी लोड होती है: पते, रंगीन नंबर वाले पिन और लोकेशन पैनल, सब प्रीव्यू में लाइव और छेड़ने के लिए तैयार।

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। जिन विज़िटर के सिस्टम में “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” सेटिंग होती है — विजेट जान-बूझकर उसका मान रखता है और तुरंत बदल देता है। यह बग नहीं है, और बाकी विज़िटर को आपका चुना प्रीसेट दिखता रहता है।

बदलाव दिख नहीं रहे। कोई कैशिंग प्लगिन (या होस्ट का कैश) पुराना पेज दे रहा है। शॉर्टकोड एट्रिब्यूट बदलने के बाद पेज कैश पर्ज करें — विजेट में खुद कैश करने जैसा कुछ नहीं है।