कोणत्याही साइटवर नकाशा विजेट कसे एम्बेड करावे

बिल्डरमध्ये सुरुवात करा (एकच खरे काम)

सर्व सुरुवात नकाशा-एम्बेड बिल्डर येथे होते. जिओकोडिंग एकदाच, तिथेच होते — तुम्ही कॉपी करता तो स्निपेट निश्चित निर्देशांक घेऊन जातो. म्हणून जिओकोडर बंद पडला किंवा “पत्ता नॉर्मलायझेशन” झाले, तरी नंतर तुमचा पिन हलू शकत नाही. पत्ता टाइप करा, पिन कुठे उतरतो ते पाहा, आणि कॉपी करण्यापूर्वी तो तुमच्या खऱ्या प्रवेशद्वारावर ड्रॅग करा: दहा सेकंदांचा हा ड्रॅग म्हणजे “योग्य रस्ता” आणि “योग्य दार” यातील फरक.

तुमची रचना बांधण्यापूर्वी पूर्ण झालेली बहु-शाखा मांडणी पाहायची आहे? बिल्डर डेमो उघडा — त्यात पत्ते, रंगीत क्रमांकित पिन आणि ठिकाणे पॅनेल असलेली तीन शाखांची नमुना कंपनी थेट प्रिव्ह्यूमध्ये लोड होते, चाळून पाहण्यासाठी तयार.

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 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” सेटिंग कारणीभूत असते — विजेट ते मुद्दाम पाळते आणि त्वरित बदल करते. हा दोष नाही, आणि इतर अभ्यागतांना तुम्ही निवडलेला प्रीसेट दिसतोच.

केलेले बदल दिसत नाहीत. कॅशिंग प्लगिन (किंवा होस्टचा कॅश) जुनेच पान देत आहे. शॉर्टकोड ॲट्रिब्यूट्स बदलल्यानंतर पानाचा कॅश साफ करा — विजेटमध्ये कॅश करण्यासारखे काहीही नसते.