कुनै पनि साइटमा नक्सा विजेट कसरी एम्बेड गर्ने

बिल्डरमा सुरु गर्नुहोस् (एक मात्र वास्तविक काम)

सबै काम नक्सा-एम्बेड बिल्डरबाट सुरु हुन्छ। जियोकोडिङ त्यहीँ, एक पटक मात्र हुन्छ — तपाईंले प्रतिलिपि गर्ने स्निपेटमा स्थिर निर्देशांक हुन्छन्, त्यसैले जियोकोडर बन्द भए वा “ठेगाना सामान्यीकरण” भए पनि पछि तपाईंको पिन सर्न सक्दैन। ठेगाना टाइप गर्नुहोस्, पिन कहाँ खस्छ हेर्नुहोस्, त्यसपछि प्रतिलिपि गर्नुअघि त्यसलाई आफ्नो वास्तविक प्रवेशद्वारमा तान्नुहोस्: दस सेकेन्डको त्यो तानाइले “सही सडक” र “सही ढोका” बीचको फरक ल्याउँछ।

आफ्नो बनाउनुअघि तयार भइसकेको बहु-शाखा सेटअप हेर्न चाहनुहुन्छ? बिल्डर डेमो खोल्नुहोस् — यसमा तीन शाखा भएको नमुना कम्पनी लोड हुन्छ। ठेगाना, रङ्गीन क्रमाङ्कित पिन र स्थान प्यानल पूर्वावलोकनमै जीवित हुन्छन्, खेलाउन तयार।

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 थिच्नुहोस्। आगन्तुकले स्थान प्यानल पाउँछन् — डेस्कटपमा नक्साको छेउमा एकोर्डियन, फोनमा स्वाइप गर्न मिल्ने कार्ड पट्टी — क्रमाङ्कित पिनसहित: कुनै शाखा छान्दा नक्सा उडेरै त्यहाँ पुग्छ र त्यसको ठेगाना आफ्नै 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” सेटिङ हुन्छ — विजेटले जानाजान त्यसको सम्मान गर्छ र तुरुन्तै फेर्छ। यो बग होइन, र अरू आगन्तुकले तपाईंले छानेको प्रिसेट देख्दै गर्छन्।

सम्पादन देखिँदैन। क्यासिङ प्लगिन (वा होस्टको क्यास) पुरानै पृष्ठ देखाइरहेको छ। शर्टकोडका विशेषता सम्पादन गरेपछि पृष्ठको क्यास पर्ज गर्नुहोस् — विजेट आफैमा क्यास गर्नुपर्ने कुरा हुँदैन।