چگونه ابزارک نقشه را در هر سایتی جاسازی کنیم
جاسازی را یکبار بسازید: آدرستان را در سازندهٔ جاسازی نقشه بنویسید، پین را دقیقاً روی ورودی خودتان بکشید و یک خط آیفریم را کپی کنید — در هر پلتفرمی که بلوک HTML/جاسازی دارد کار میکند. کاربران WordPress میتوانند بهجای آن افزونه را نصب کنند و از کوتاهکد استفاده کنند. در هر دو حالت نه کلید API لازم است، نه حساب پرداخت و نه کوکی؛ و پین هرگز جابهجا نمیشود، چون جاسازی مختصات نهایی شما را با خود میبرد و آدرس را دوباره ژئوکد نمیکند.
مبتنی بر اجازه · خصوصی · در Chrome، Safari، Firefox، Edge کار میکند
از سازنده شروع کنید (تنها کار واقعی)
همهچیز از سازندهٔ جاسازی نقشه شروع میشود. ژئوکدینگ یکبار، همانجا انجام میشود — قطعهکدی که کپی میکنید مختصات ثابت را با خود دارد. پس قطعی سرویس ژئوکدینگ یا «یکسانسازی آدرس» هرگز نمیتواند بعداً پین شما را جابهجا کند. آدرس را بنویسید، ببینید پین کجا مینشیند، سپس پیش از کپی آن را روی ورودی واقعیتان بکشید: همان کشیدنِ دهثانیهای فرق «خیابان درست» با «درِ درست» است.
میخواهید پیش از ساختن، یک نمونهٔ کاملِ چندشعبهای ببینید؟ نمایش سازنده را باز کنید — یک شرکت نمونه با سه شعبه بارگذاری میشود، همراه با آدرسها، پینهای شمارهدار رنگی و پنل مکانها، زنده در پیشنمایش و آمادهٔ ور رفتن.
WordPress: کوتاهکد افزونه یا آیفریم خام؟
هر دو مسیر به ابزارک یکسانی میرسند — به سلیقهٔ خودتان انتخاب کنید.
مسیر افزونه (پیشنهادی): whatismylocation-widget.zip را دانلود کنید → wp-admin ▸ افزونهها ▸ افزودن ▸ بارگذاری افزونه → فعالسازی. سپس یک بلوک کوتاهکد اضافه کنید:
[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 در سازنده، کوتاهکد کامل را برایتان میسازد — بدون تایپ.
مسیر بدون افزونه: آیفریم را از سازنده در یک بلوک HTML سفارشی بچسبانید. همان ابزارک، بدون افزونهای که بهروزرسانی شود؛ در عوض کد طولانیتری در محتوایتان میماند و بعداً ویرایش به سبک ویژگیها ندارید.
Squarespace، Shopify، Notion — و بقیه
بیرون از WordPress معمولاً کار به یکبار چسباندن خلاصه میشود: عنصر HTML/جاسازی پلتفرمتان را اضافه کنید (در Wix Embed HTML، در Squarespace بلوک Code، در Webflow Embed) و آیفریم را داخل آن بگذارید. یک تفاوت، کار ابزارک نقشه را از ابزارک موقعیت سادهتر میکند: به ویژگی allow="geolocation" نیاز ندارد، چون هرگز چیزی از بازدیدکننده نمیخواهد — پس وقتی صفحهساز، HTML شما را بازنویسی میکند، چیز شکنندهای برای حفظکردن نیست.
Squarespace: یک بلوک Code اضافه کنید و بچسبانید. یک نکته که بهتر است از همان اول بدانید: بلوکهای Code به پلن Business یا بالاتر نیاز دارند — در پلن Personal، بلوک بهجای اجرای کد، آن را بهصورت متن ساده نشان میدهد.
Shopify چیزی بهتر از چسباندن میطلبد: ما یک بخش قالب آماده ارائه میکنیم — یک فایل در قالب شما، یک پنل تنظیمات بومی میدهد که شعبهها در آن بلوکهایی هستند و با کشیدن مرتب میشوند، بدون اپ و بدون کلید API.
Notion و Google Sites با نشانی اینترنتی جاسازی میکنند، نه با HTML. اصلاً قطعهکد آیفریم را نمیپذیرند — بهجایش در سازنده دکمهٔ کپی نشانی ابزارک را بزنید و آن را در بلوک /embed در Notion یا در Embed ▸ By URL در Google Sites بچسبانید. ابزارک یک صفحهٔ مستقل کامل است، پس در هر دو حالت بینقص نمایش داده میشود.
Salesforce Experience Cloud (سایتهای عمومی انجمن): آیفریم را در یک مؤلفهٔ HTML Editor بگذارید — سپس از مدیر سیستمتان بخواهید whatismylocation.ai را در Setup ▸ Trusted URLs با دستور CSP یعنی frame-src اضافه کند، وگرنه Salesforce بیسروصدا فریم را مسدود میکند. تیمهایی که با کد کار میکنند میتوانند همان نشانی را در یک Lightning Web Component حدود 10 خطی بپیچند:
<!-- 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 مکان در یک جاسازی جا میشود. در حالت پیشرفتهٔ سازنده، هر پین را جایگذاری کنید، به آن برچسب و آدرس بدهید و افزودن مکان را بزنید. بازدیدکننده یک پنل مکانها میبیند — روی دسکتاپ یک آکاردئون کنار نقشه، روی گوشی نواری از کارتهای کشیدنی — با پینهای شمارهدار: با انتخاب هر شعبه، نقشه بهسمت آن پرواز میکند و آدرسش را با لینک مسیریابی مخصوص خودش نشان میدهد.
panel=چیدمان را انتخاب میکند:auto(پیشفرض — کناری در آیفریمهای پهن، نواری در باریکها)،side،bottomیاnoneبرای پینهای ساده + پاپآپ.motion=انیمیشن جابهجایی را تعیین میکند:smooth(پروازِ پیشفرض)،fade،livelyیاnone. بازدیدکنندگانی که «کاهش حرکت» را در سیستمشان فعال کردهاند، هر چه انتخاب کنید همیشه نسخهٔ فوری را میبینند.open=noکار را با همهٔ ورودیهای جمعشده شروع میکند؛ نقشه خودش همهٔ شعبهها را در کادر جا میدهد وzoomشما به بیشینه تبدیل میشود.
مرجع گزینهها
| گزینه | مقادیر | یادداشتها |
|---|---|---|
lat / lng | درجهٔ اعشاری | برای یک مکان تکی لازم است (سازنده آنها را پر میکند). |
pins | lat,lng,Label~Address|… | تا 10 شعبه؛ جایگزین lat/lng میشود. برچسبها حداکثر ۸۰ نویسه، آدرسها ۱۲۰؛ بدون | یا ~ در داخلشان. |
name | متن ≤80 | عنوان درشتِ روکش/پنل — معمولاً نام کسبوکار شما. |
address | تا 3 خط | آدرس روی روکش (مکان تکی؛ شعبهها از Label~Address استفاده میکنند). سازنده سه ورودی خط به شما میدهد؛ در کوتاهکد WordPress، | خطها را جدا میکند. |
name_style / address_style | n · b · i · bi | پررنگ/مورب برای هر خط — عنوان بهطور پیشفرض پررنگ است و سبک انتخابی جای آن پیشفرض را میگیرد. در سازنده: دکمههای کوچک B/I در حالت پیشرفته. |
maps | google · apple · google,apple | لینکهای آیکونی کوچک «باز کردن در Google Maps» / «باز کردن در Apple Maps» با راهنمای شناور، روی کارت و برای هر شعبه در پنل. مقدار ندهید، آیکونی هم نیست. |
zoom | 2–19، پیشفرض 16 | با شعبهها، پس از جاگیری خودکار به بیشینه تبدیل میشود. |
theme | light · dark · golden | هماهنگ با سایت خودتان. |
marker | emerald · red · amber · indigo · slate | رنگ پین؛ پیشفرض همان آبی کلاسیک است. |
panel | auto · side · bottom · none | چیدمان پنل مکانها (فقط حالت چندپینی). |
motion | smooth · fade · lively · none | انیمیشن جابهجایی شعبه؛ بازدیدکنندگان با «کاهش حرکت» همیشه حالت فوری را میبینند. |
open | yes · no | اینکه شعبهٔ اول باز شروع شود یا نه (پیشفرض yes). |
directions | yes · no | دکمه(های) مسیریابی — در حالت چندپینی برای هر شعبه جداگانه. |
iframe height | 220–800 px | 340 برای یک پین مناسب است؛ 400 به بالا همراه پنل جای بازتری دارد. |
attribution | yes · no | زیرنویس اختیاری «Powered by» روی صفحهٔ شما — در افزونه بهطور پیشفرض خاموش است. |
عیبیابی WordPress
کوتاهکد بهصورت متن خام در صفحه دیده میشود. آن بلوک کوتاهکد را پردازش نمیکند. در ویرایشگر بلوک از بلوک کوتاهکد استفاده کنید (نه بلوک کد یا از پیش قالببندیشده)؛ در Elementor از ابزارک Shortcode آن و در Divi از ماژول Code. کاربران ویرایشگر کلاسیک: آن را در زبانهٔ دیداری بهصورت متن ساده بنویسید.
اصلاً چیزی نمایش داده نمیشود. کد منبع صفحه را ببینید و دنبال whatismylocation بگردید. یک توضیح HTML دربارهٔ نبودِ lat/lng یعنی مختصات وجود ندارد یا نامعتبر است — بهجای تایپ دستی ویژگیها، کوتاهکد کامل را از سازنده کپی کنید.
آیفریم هنگام ذخیره ناپدید میشود (مسیر بدون افزونه). WordPress برای نقشهای کاربری که قابلیت unfiltered_html را ندارند آیفریمها را حذف میکند — در چندسایتی این بهطور پیشفرض شامل مدیران هم میشود — و بعضی افزونههای امنیتی هم همین کار را میکنند. کوتاهکد افزونه راهحل تمیز است: به مجاز بودن نقش شما برای ذخیرهٔ آیفریم خام وابسته نیست.
نقشه خاکستری است / کاشیها بارگذاری نمیشوند. کاشیها از tile.openstreetmap.org میآیند؛ یک مسدودکنندهٔ تبلیغات خیلی سختگیر یا شبکهٔ سازمانی میتواند آنها را مسدود کند (کارت روکش همچنان نمایش داده میشود). با شبکهای دیگر یا با گوشی روی دادهٔ همراه بررسی کنید.
پنل مکانها نمایش داده نمیشود. پنل از 2 پین به بالا ظاهر میشود — مکان تکی همان کارت روکش کلاسیک را میگیرد. همچنین بررسی کنید که panel="none" تنظیم نشده باشد.
انیمیشن جابهجایی اجرا نمیشود. تقریباً همیشه تنظیم «کاهش حرکت» در سیستمعامل بازدیدکننده (یا خود شما) دلیلش است — ابزارک عمداً به آن احترام میگذارد و فوری جابهجا میشود. این ایراد نیست و بقیهٔ بازدیدکنندگان همچنان حالت انتخابی شما را میبینند.
ویرایشها نمایش داده نمیشوند. یک افزونهٔ کش (یا کش هاست) صفحهٔ قدیمی را نشان میدهد. بعد از ویرایش ویژگیهای کوتاهکد، کش صفحه را پاک کنید — خودِ ابزارک چیزی برای کش کردن ندارد.
گامبهگام
- سازندهٔ جاسازی نقشه را باز کنید، آدرس خود را تایپ کنید، و روی Find on map بزنید (یا مختصات خام مانند 48.8584، 2.2945 را جایگذاری کنید).
- پین را بکشید (یا روی نقشه کلیک کنید) تا دقیقاً روی درِ ورودی شما بنشیند — سرویسهای ژئوکدینگ معمولاً روی مرکز خیابان مینشینند، نه دَرِ شما. جاسازی این مختصات نهایی را برای همیشه نگه میدارد.
- نام کسبوکار خود را اضافه کنید و یک قالب انتخاب کنید. شعبه دارید؟ سازنده را به حالت Advanced تغییر دهید و برای هرکدام روی Add location بزنید — یک برچسب بههمراه آدرس.
- کد جاسازی را کپی کنید — یا، در WordPress، شورتکد آماده را از همان صفحه — و آن را در صفحهٔ خود جایگذاری کنید.
- منتشر کنید و صفحه را بررسی کنید: نقشه، پین و دکمهٔ Get directions باید بلافاصله نمایش داده شوند. بدون کلید، بدون حساب کاربری، و بدون چیزی که در سمت سرور باید پیکربندی شود.
پرسشهای متداول
برای جاسازی نقشه به کلید API نیاز دارم؟
چند شعبه را میتوانم در یک نقشه نشان دهم؟
نمایش به انگلیسی: How to Embed a Map Widget on Any Site · فارسی