যেকোনো সাইটে ম্যাপ উইজেট এমবেড করার নিয়ম

বিল্ডারেই শুরু (আসল কাজটা এখানেই)

সবকিছু শুরু হয় ম্যাপ-এমবেড বিল্ডার থেকে। জিওকোডিং হয় একবার, সেখানেই — আপনি যে স্নিপেট কপি করেন তাতে নির্দিষ্ট স্থানাঙ্ক বসানো থাকে। তাই পরে জিওকোডার বন্ধ থাকলে বা “ঠিকানা নর্মালাইজেশন” হলেও আপনার পিন সরতে পারে না। ঠিকানা লিখুন, পিন কোথায় পড়ল দেখুন, তারপর কপি করার আগে সেটি টেনে আপনার আসল প্রবেশপথে বসান: ওই দশ সেকেন্ডের টানই “সঠিক রাস্তা” আর “সঠিক দরজা”-র পার্থক্য গড়ে দেয়।

নিজের সেটআপ বানানোর আগে তৈরি একটি মাল্টি-ব্রাঞ্চ উদাহরণ দেখতে চান? বিল্ডার ডেমো খুলুন — এতে তিনটি শাখার একটি নমুনা কোম্পানি লোড হয়, সঙ্গে ঠিকানা, রঙিন নম্বরযুক্ত পিন আর প্রিভিউতে চালু লোকেশন প্যানেল, যা নেড়েচেড়ে দেখা যায়।

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 ব্লক যোগ করে পেস্ট করুন। শুরুতেই জেনে রাখা ভালো একটি শর্ত: কোড ব্লকের জন্য বিজনেস প্ল্যান বা তার উপরের প্ল্যান দরকার — পার্সোনাল প্ল্যানে ব্লকটি কোড রেন্ডার না করে সাধারণ লেখা হিসেবে দেখায়।

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” সেটিং — উইজেট নকশা অনুযায়ী সেটি মেনে চলে এবং তাৎক্ষণিকভাবে বদলায়। এটি ত্রুটি নয়, আর অন্য দর্শকেরা আপনার বেছে নেওয়া প্রিসেটই দেখেন।

সম্পাদনা দেখা যাচ্ছে না। কোনো ক্যাশিং প্লাগইন (বা হোস্টের ক্যাশ) পুরোনো পেজ দেখাচ্ছে। শর্টকোডের অ্যাট্রিবিউট বদলানোর পর পেজ ক্যাশ পার্জ করুন — উইজেটের নিজের ক্যাশ করার মতো কিছু নেই।