نقشههای گوگل را فراموش کنید. با SVG نقشههای سریعتر، خصوصیتر و سفارشیتر بسازید
شما میخواهید یک نقشه تعاملی و قابل تنظیم به وبسایت خود اضافه کنید.
اگرچه گوگل مپ ممکن است در زمینه نقشهبرداری شخصی و برنامهریزی مسیر، پیشرو باشد، اما همیشه بهترین راه حل برای اهداف دیگر نیست.
دلایل زیادی وجود دارد که چرا توسعهدهندگان وردپرس به دنبال جایگزینهایی برای API نقشههای گوگل هستند. سرعت بارگذاری، نگرانیهای مربوط به حریم خصوصی، سفارشیسازی رابط کاربری و نبود امکانات، همگی نگرانیها و اعتراضات بهجا هستند.
بنابراین، به جای آن باید از چه چیزی استفاده کنید؟
برای کسب اطلاعات بیشتر در مورد SVG به عنوان جایگزینی برای نقشههای گوگل و اینکه چگونه یک افزونه به شما در ایجاد نقشه تعاملی که تصور میکنید کمک میکند، به خواندن ادامه دهید.
بدون هیچ گونه مصالحه ای.
چرا به یک جایگزین برای گوگل مپ نیاز دارید؟
اینطور نیست که نتوانید با گوگل مپس نقشههای سفارشی و تعاملی ایجاد کنید.
برای مثال، فرض کنید میخواهید نقشهای از بهترین سواحل فلوریدا که برای سگها مناسب است، تهیه کنید و در وبسایت خود قرار دهید.
با استفاده از نقشههای گوگل، میتوانید مکانی را که میخواهید هدف قرار دهید انتخاب کنید، لایهها را اضافه کنید، نشانگرها را پین کنید و برخی جزئیات سفارشی (مانند توضیحات مکان و رنگ نشانگرها) را اضافه کنید.

اشکالی ندارد، اگر فقط همین را لازم دارید.
اما اگر چیزی فراتر از این برای نقشه جغرافیایی خود در نظر بگیرید، چه؟
یا اگر بخواهید نوع کاملاً متفاوتی از نقشه را ایجاد کنید، چه؟
بیایید از اینجا شروع کنیم - با انواع نقشه. در اینجا برخی از انواع مکان و محتوا وجود دارد که گوگل قادر به کمک به شما در نقشه برداری آنها نخواهد بود:
نقشه مکانیاب آژانس (مانند املاک یا بیمه)
نقشه چیدمان ساختمان
نقشه بخش فروشگاه
نقشه پردیس
دایرکتوری مراکز خرید
طرح رویداد یا کنفرانس
نقشه طبقه آپارتمان
نقشه مکانهای خصوصی (مثلاً پارکهای تفریحی، پارکهای منطقهای، موزهها)
نقشه تجسم دادهها
گرافیک پست وبلاگ با توصیهها و مکانهای پین شده
و در اینجا دلایل دیگری وجود دارد که چرا توسعهدهندگان و طراحان اغلب به دنبال جایگزینهایی برای گوگل برای ایجاد نقشههای سفارشی هستند:
آنها میخواهند نقشه با برند مطابقت داشته باشد، نه با گوگل.
ویژگی یا قابلیت مورد نیاز در دسترس نیست.
آنها دادههای سفارشی برای تولید نقشه و نقاط مورد علاقه دارند.
نقشههای گوگل اطلاعات زیادی دارند و میتوانند حواسپرتی ایجاد کنند.
آنها میخواهند علاوه بر نشانگرها، مناطق را نیز قابل کلیک کنند.
آنها نگران دسترسی گوگل به تمام دادههای مکانی و تجاری هستند.
API نقشههای گوگل صفحات را بیش از حد کند میکند.
آنها چیزی میخواهند که به طور یکپارچه با وردپرس ادغام شود.
اگر این وضعیت شما را هم درگیر کرده، MapSVG میتواند همان جایگزینی باشد که به دنبالش بودهاید. با این افزونه وردپرس، میتوانید هر نوع نقشهای را که دوست دارید با استفاده از یک فایل SVG و دادههای خودتان ایجاد کنید. سپس آن را مطابق میل خود سفارشی کنید.
نحوه ایجاد نقشه سفارشی و تعاملی با MapSVG
MapSVG به شما هر چقدر که بخواهید، انعطافپذیری و کنترل روی نقشههای وبسایتتان میدهد. با تنظیمات سفارشیسازی گسترده و همچنین ویرایشگرهای جاوا اسکریپت و CSS، میتوانید با این افزونه وردپرس، رویای خود را به واقعیت تبدیل کنید.
در اینجا نگاهی به درون این افزونه و نحوه استفاده از آن برای کنار هم قرار دادن نقشه بعدیتان میاندازیم:
نکته (بهروزرسانی شده): MapSVG شامل پایگاه داده مخصوص به خود با فیلدهای سفارشی برای مناطق و نشانگرها است. میتوانید این فیلدها را مستقیماً در MapSVG اضافه و مدیریت کنید.
اگر ترجیح میدهید دادهها را در پستها/CPTهای وردپرس نگه دارید، میتوانید به صورت اختیاری از ACF برای مدیریت آن فیلدها و اتصال آنها به MapSVG استفاده کنید. ACF الزامی نیست .
مرحله ۱: تصویر SVG خود را اضافه کنید
پس از نصب افزونه MapSVG و فعالسازی مجوز خود، به داشبورد افزونه بروید. در اینجا میتوانید نقشه خود را از بین دهها الگوی جغرافیایی یا با وارد کردن الگوی خودتان ایجاد کنید.

برای انتخاب از بین بیش از صد نقشه برای جهان، قارهها، کشورها و همچنین ایالتهای مختلف آمریکا، روی منوی کشویی «نقشه جدید SVG» کلیک کنید.
برای مثال، این نقشه جهان است:

این نقشه جمهوری دومینیکن است:

و این نقشه ایالت مینه سوتا است:

لیست کامل نقشهها را اینجا ببینید.
اگر ترجیح میدهید از نقشه یا تصویر خودتان استفاده کنید، «بارگذاری SVG» را انتخاب کنید. هیچ محدودیتی در مورد آنچه میتوانید بارگذاری کنید وجود ندارد.
با این اوصاف، افزونهی MapSVG میتواند در زمان شما برای نقشهبرداری از مناطق، ایجاد اشیاء و اضافه کردن نشانگرها صرفهجویی کند، البته اگر فایل SVG را به روشی خاص تنظیم کنید. به طور خاص، این افزونه گرافیکهای موجود را تجزیه و تحلیل میکند و به دنبال موارد زیر در فایل SVG میگردد:
شیء دارای یک شناسه (ID) مشخص است.
شیء مورد نظر یک مسیر / مستطیل / چندضلعی / بیضی / دایره است
اگر این ویژگیها رعایت شوند، افزونه بهطور خودکار آن اشیاء را بهعنوان مناطق برای شما نگاشت میکند.
مرحله ۲: ظاهر نقشه خود را سفارشی کنید
با بارگذاری نقشه، ویرایشگر MapSVG به شکل زیر خواهد بود:

در سمت چپ فایل SVG که وارد کردهاید قرار دارد. در این مورد، این یک نقشه مصور از اردوگاه پارک پریری است تا به بازدیدکنندگان در رفت و آمد کمک کند.
در سمت راست، پنل تنظیمات قرار دارد. آیکونهای نوار ابزار در بالا به شما این امکان را میدهند که جنبههای مختلف نقشه خود را به همراه مناطق، اشیاء یا مکانهای مختلف موجود در آن، سفارشی کنید.
دو آیکون اول - تنظیمات و رنگها - جایی هستند که بیشتر تنظیمات اولیه را انجام خواهید داد. میتوانید کنترلهای زوم و اسکرول را تنظیم کنید، نحوه نمایش راهنماها و پاپاوورها را پیکربندی کنید، به نشانگرها برچسب اضافه کنید و غیره. همچنین میتوانید رنگهای داخل نقشه را سفارشی کنید.
اگر میخواهید استایلبندی و سفارشیسازی بیشتری انجام دهید، از آیکونهای جاوا اسکریپت و CSS در انتهای نوار ابزار برای انجام تنظیمات خود استفاده کنید.
مرحله ۳: دادههای خود را اضافه یا وارد کنید
دو نوع محتوای تعاملی برای اضافه کردن به نقشه شما وجود دارد.
مناطق، بخشهای بزرگتری هستند که نقشه را تقسیم میکنند. برای مثال، در نقشه ایالات متحده، مناطق به احتمال زیاد ۵۰ ایالت خواهند بود. با این حال، میتوانید آن را بر اساس منطقه، مانند شمال شرقی، جنوب غربی و غیره نیز تقسیم کنید. از سوی دیگر، برای نقشه فروشگاه، مناطق میتوانند بخشها (مثلاً «مردانه»، «کفش»، «لوازم خانگی») باشند.
لازم نیست هر نقشهای منطقه داشته باشد. اگر تنها چیزی که میخواهید اضافه کردن نشانگرهایی با اطلاعات مرتبط است، میتوانید نقشه خود را فقط با اشیاء (Objects only) تنظیم کنید.
اشیاء میتوانند هر چیزی باشند که شما میخواهید. برای مثال، در مثال نقشه اردوگاه، اشیاء تمام مکانهای کلیدی اطراف پارک هستند، از جمله:
کابینها
محل کمپ چادری
امکانات سرویس بهداشتی
گودالهای آتش
پارک سگها
اگر یک فایل SVG ایجاد کردهاید که افزونه نمیتواند به وضوح محل مناطق و اشیاء شما را تشخیص دهد، باید آنها را به صورت دستی ایجاد کنید. روشهای مختلفی برای انجام این کار وجود دارد.
استفاده از ویرایشگر برای اضافه کردن مناطق
برای افزودن دستی یک منطقه به نقشه خود، روی دکمه ویرایش فایل SVG در نوار ابزار بالا کلیک کنید. نقشه در جای خود باقی میماند، اما یک نوار ابزار کوچک در سمت چپ صفحه نمایش با ابزارهای طراحی ظاهر میشود.

با استفاده از این ابزارها، میتوانید اشیاء (مانند گرافیک سگ یا درخت) را انتخاب کنید. همچنین میتوانید اشکال هندسی را برای تنظیم مناطق مختلف رسم کنید. پس از انتخاب یا اضافه کردن یک منطقه ، روی آن دوبار کلیک کنید و یک شناسه توصیفی به آن بدهید. همچنین میتوانید رنگ پر کردن را سفارشی کنید.
وقتی مناطق شما در فایل ذخیره شدند، میتوانید آنها را در مسیر Map Settings > Regions مشاهده کنید.

منطقه «کابین» جدیدی که در تصویر بالا ایجاد کردم به لیست من اضافه شده است. اما جزئیات مهمی ندارد. برای پر کردن این موارد، روی منطقهای که میخواهید ویرایش کنید کلیک کنید.
به طور پیشفرض، MapSVG به شما امکان میدهد فیلدهای زیر را پر کنید:
شناسه
عنوان
توضیحات
وضعیت
تصاویر (برای آپلود)
پیوند
اگر میخواهید اطلاعاتی را که میتوانید به هر منطقه پیوست کنید تغییر دهید، روی دکمه ویرایش فیلدها (آیکون مداد) در بالای پنل تنظیمات کلیک کنید.

آنچه در سمت چپ میبینید، تمام فیلدهایی است که میتوانید پر کنید. در سمت راست، جایی است که میتوانید پارامترهای هر فیلد را سفارشی کنید.
برای حذف یک فیلد، آن را از سمت چپ انتخاب کنید و سپس دکمه «حذف» را در سمت راست بزنید.
برای افزودن فیلد، یکی از دکمههای پایین را انتخاب کنید - مثلاً متن، ناحیه متنی، کادر انتخاب، رادیو و غیره. سپس تنظیمات را در صورت نیاز پیکربندی کنید.
پایگاه داده داخلی MapSVG به شما امکان میدهد فیلدهای سفارشی را برای مناطق و اشیاء مستقیماً اضافه/ویرایش کنید.
اگر گردش کار شما از پستهای وردپرس/CPTها با ACF استفاده میکند، میتوانید آنها را نیز متصل کنید - ACF اختیاری است، نه یک الزام.
پس از اتمام کار، تغییرات خود را ذخیره کنید و به لیست خود برگردید.
وارد کردن فایل CSV از اشیاء شما
برای افزودن اشیاء (و نشانگرهای مربوطه) به نقشه خود، باید یک فایل CSV را وارد کنید. (ضمناً میتوانید همین کار را با Regions نیز انجام دهید.)
برای وارد کردن CSV خود، فیلدها باید با فیلدهای موجود در افزونه مطابقت داشته باشند. برای مشاهده وضعیت فعلی آنها، به Database > Edit fields بروید. همانند Regions ، اگر میخواهید فیلدهای متصل به هر Object را سفارشی کنید، آنها را در اینجا اضافه، ویرایش یا حذف کنید.
وقتی صفحهگسترده خود را به فیلدهای MapSVG نگاشت کردید، تمام اطلاعات مرتبط را که میتوانید وارد کنید. حداقل، یک شناسه و عنوان را وارد کنید. میتوانید بقیه جزئیات را بعداً در داخل افزونه وارد کنید.
فایل وارد کردن اشیاء من در گوگل شیت به این شکل است:

برای دانلود این نمونه و استفاده از آن:
این سند را در مرورگر خود باز کنید.
به مسیر File > Make a copy بروید و آن را در گوگل درایو خود ذخیره کنید.
روش دیگر، کلیک بر روی فایل > دانلود و ذخیره آن به عنوان یک فایل با مقادیر جدا شده با کاما (.csv) در رایانه شماست.
شما میتوانید نمونههایی از برگههای Regions و Objects را در سند پیدا کنید. اگر قصد دارید از هر دو استفاده کنید، باید آنها را جداگانه صادر کنید.
وقتی فایل CSV خود را آماده کردید، روی دکمهی «وارد کردن» از نمای پایگاه داده (در صورت وارد کردن اشیاء) کلیک کنید. فایل را انتخاب کرده و آن را آپلود کنید.
وقتی این کار تمام شد، به نمای لیست بروید و خواهید دید که تمام اشیاء شما اضافه شدهاند.

برای پر کردن جزئیات و اضافه کردن تصاویر، روی نام شیء کلیک کنید و آن را ویرایش کنید.
اگر میخواهید نشانگرها (پینهای موقعیت قرمز) اضافه کنید، میتوانید این کار را از این پنل نیز انجام دهید.
شیء مورد نظر برای پین کردن را در سمت راست انتخاب کنید. با باز شدن پنجره ویرایش، روی نقشه در سمت چپ، جایی که میخواهید پین را قرار دهید، کلیک کنید. همچنین میتوانید یک آدرس یا مختصات برای نقشهبرداری نشانگر خود وارد کنید.
در حالی که مناطق ذاتاً تعاملی هستند (بر اساس تنظیماتی که در مرحله بعدی فعال میکنید)، اشیاء اینگونه نیستند. بنابراین برای اینکه بازدیدکنندگان بتوانند با آنها تعامل داشته باشند، باید نشانگرهایی به آنها اضافه کنید.
مرحله ۴: به نقشه خود جان ببخشید
انواع مختلف نقشهها به تعامل متفاوتی نیاز دارند.
جزئیات را فاش کنید
با رفتن به برگه «اقدامات» در نوار ابزار بالا شروع کنید. از این صفحه، میتوانید تعیین کنید که وقتی کاربر با نقشه شما تعامل میکند، چه اتفاقی بیفتد.

برای مثال، وقتی کسی روی یک منطقه یا نشانگر کلیک میکند، میتوانید نقشه را به صورت زیر تنظیم کنید:
روی آن منطقه زوم کنید.
جزئیات مرتبط را به اشتراک بگذارید.
نمایش یک پنجرهی پاپاور.
آنها را به یک صفحه لینک شده هدایت کنید.
نقشه متفاوتی را نشان دهید.
نمایش یک راهنمای ابزار.
شما همچنین میتوانید این کار را برای موارد فهرست راهنما انجام دهید.
همچنین، تنظیمات زیر پنل Details را بررسی کنید. از اینجا میتوانید نحوه نمایش جزئیات Region یا Object را تعیین کنید. گزینهها عبارتند از:
ظرف نقشه
تمام صفحه
نوار کناری سمت چپ
نوار کناری سمت راست
سربرگ
پاورقی
ظرف سفارشی
اگر جزئیات زیادی و حتی عکسهایی در مورد یک مکان، شیء یا شخص اضافه میکنید، ایده خوبی است که رابط نقشه را واضح نگه دارید و جزئیات را در کنار آن ارائه دهید. با ارائه جزئیات در یک ظرف خارج از نقشه، این به شما امکان میدهد تا تجربهای سازمانیافتهتر و کاربرپسندتر ایجاد کنید.
فیلترها، جستجو و دایرکتوریها را اضافه کنید
نقشهای با مناطق و نشانگرهای زیاد ممکن است برخی از بازدیدکنندگان را سردرگم کند. در حالی که برخی از آنها ممکن است سرگرمکننده باشند - مانند نقشه کروپلت یا سایر تجسم دادهها - برخی دیگر ممکن است به رویکردی سادهتر برای تعامل نیاز داشته باشند.
برای مثال، فرض کنید نقشهای دارید که شامل تمام دفاتر نمایندگی بیمه در شهرستان شما است. به هر یک از نمایندگان بیمه بر اساس آنچه میفروشند، دستهبندیهایی اختصاص داده شده است: سلامت، خودرو، عمر، مسئولیت و غیره.
به جای اینکه بازدیدکنندگان شما برای دریافت این اطلاعات روی هر نشانگر کلیک کنند و جزئیات هر نماینده را بررسی کنند، میتوانید فیلترها را فعال کرده و از زیر برگه فیلترها جستجو کنید.
درست مانند مناطق ، میتوانید فیلدهایی را که در نوار فیلترها نمایش داده میشوند، سفارشی کنید. به طور پیشفرض، «رده» و «جستجو بر اساس آدرس» نمایش داده میشوند.
هر کدام را انتخاب کنید و برای حذف آنها روی «حذف» کلیک کنید. سپس از تبهای پایین برای اضافه کردن فیلدهای مورد نیاز خود استفاده کنید.

هنگام استفاده از فیلترها با یک گرافیک SVG وارد شده، بهترین گزینه برای فیلترها جستجوی متن، جستجو بر اساس آدرس، جستجوی مکان و مرتبسازی بر اساس فیلد ACF یا طبقهبندی (اگر از افزونه ACF استفاده میکنید) است.
راه دیگری که به کاربران کمک میکند تا تمام اطلاعات موجود در نقشه شما را مرتب کنند، اضافه کردن یک فهرست راهنما (Directory) است.
فهرست راهنما میتواند در کنار نقشه قرار گیرد و فهرستی از اشیاء یا مناطق قابل کلیک را روی نقشه نمایش دهد. همچنین میتوانید دستهبندیها را در فهرست راهنما نمایش دهید. انتخاب اینکه کدام یک نمایش داده شوند و به چه ترتیبی نمایش داده شوند، برای جستجوی آسان، به شما بستگی دارد.
مرحله ۵: بهینهسازی عملکرد نقشه
فایلهای SVG به طور کلی از نظر اندازه بسیار کوچکتر از تصاویر JPG یا PNG هستند. با این حال، مواردی وجود دارد که میتواند بر اندازه فایل SVG شما و تأثیر آن بر سرعت صفحه شما تأثیر بگذارد.
اگر هنوز عادت به انجام این کار ندارید، در اینجا چند نکته وجود دارد که میتوانید برای کاهش حجم فایل SVG خود هنگام ایجاد آن انجام دهید:
سعی کنید بوم را کوچک نگه دارید. SVG مقیاسپذیر است، بنابراین لازم نیست برای ایجاد نقشه یا تصویر خود با فایلهای با اندازه بزرگتر کار کنید.
تعداد مسیرهایی که استفاده میکنید را به حداقل برسانید. در صورت امکان، اشکال را انتخاب کنید.
قبل از خروجی گرفتن از فایل، کدها و متادیتاهای غیرضروری را حذف کنید.
همچنین، اگر چیزی در فایل پنهان شده یا خارج از بوم قرار دارد، آن را از فایل نهایی حذف کنید.
اگر میتوانید، کدهای HEX خود را به جای شش رقم، به سه رقم کوتاه کنید.
در اینجا چند نکته و راهنمایی بیشتر در مورد نحوه بهینهسازی SVGها برای عملکرد وبسایت هنگام آمادهسازی فایلهایتان ارائه شده است.
پس از اکسپورت کردن فایل، میتوانید از تاکتیکهای دیگری برای کاهش فشار بر سرعت بارگذاری صفحه خود استفاده کنید.
برای شروع، قابلیت ذخیرهسازی (caching) را فعال کنید. به این ترتیب، اگر هیچ تغییری در نقشه یا هر چیز دیگری در صفحه ایجاد نشده باشد، مرورگرها میتوانند به سرعت محتوا را در اختیار بازدیدکنندگان قرار دهند.
همچنین، بارگذاری تنبل را روی هر نقشهای که در پایین صفحه نمایش داده میشود، اعمال کنید. سادهترین راه برای انجام این کار، ویرایش کد کوتاه نقشه خود به این شکل است:
[mapsvg id="1" lazy="true"]این کار بارگذاری نقشه شما را تا زمانی که کسی به آن قسمت از صفحه اسکرول کند (اگر تا آن حد اسکرول کند) به تعویق میاندازد.
در نهایت، با استفاده از MapSVG، از مزیت اضافهی کد مقداردهی اولیهی نقشه که بنا به تقاضا تولید میشود، بهرهمند خواهید شد. این امر باعث میشود اندازهی صفحهی شما کوچکتر بماند.
برخی از افزونههای بهبود عملکرد (مثلاً WP Rocket ، LiteSpeed Cache ) ممکن است اسکریپتها را به گونهای فشردهسازی/به تعویق بیندازند که بر نقشههای تعاملی تأثیر بگذارند.
توصیه میکنیم فایلهای MapSVG را از این بهینهسازیها (کوچکسازی/تعویق/پیشبارگذاری) حذف کنید تا از بروز مشکلات جلوگیری شود.
مرحله ۶: نقشه را به صفحه خود اضافه کنید
برای افزودن نقشه خود به یک صفحه یا پست، کد کوتاه را کپی کنید. آن را در کنار نام نقشه خود در گوشه سمت چپ بالای ویرایشگر پیدا خواهید کرد. کد کوتاه را میتوانید در داشبورد MapSVG نیز پیدا کنید.

برای کپی کردن شورتکد کلیک کنید. سپس به صفحه خود بروید، یک بلوک شورتکد با استفاده از وردپرس، المنتور یا سازنده بلوک مورد نظر خود اضافه کنید و شورتکد را جایگذاری کنید.
تغییرات خود را ذخیره کنید و سپس پیشنمایش کار خود را ببینید. اکنون میتوانید نقشه را مانند بازدیدکنندگان خود ببینید و با آن تعامل داشته باشید.

اگر برای مناطق یا نشانگرها، عملکردهایی با حرکت ماوس یا کلیک وجود دارد، آنها را امتحان کنید. در این نسخه آزمایشی از صفحه MapSVG میتوانید ببینید که چگونه فهرست در سمت چپ، وضعیت مربوطه را برای هر عامل برجسته میکند. کلیک روی نام عامل، یک پنجره پاپاوور (Popover) دقیق را نشان میدهد.
مطمئن شوید که قابلیتهایی که فعال کردهاید دقیقاً همانطور که میخواستید کار میکنند. سپس صفحه یا پست را در سایت خود منتشر کنید.
جمعبندی
استفاده از نقشههای گوگل در وبسایت هیچ اشکالی ندارد. موارد استفاده زیادی وجود دارد که ابزار نقشهبرداری گوگل در آنها منطقی است - مانند نمایش نقشه بزرگنمایی شده از دفاتر شما، ارائه مسیرهای از پیش تعیین شده به یک مکان یا نمایش مکانهای سفارشی.
اما نقشههای گوگل همیشه هم مناسب نیستند. علاوه بر این، نگرانیهایی در مورد سرعت بارگذاری، حریم خصوصی دادهها، محدودیت ویژگیها و غیره نیز به همراه دارد.
یک فایل SVG به خودی خود ممکن است جایگزین کاربردی به نظر نرسد. اما تبدیل یک فایل SVG به یک نقشه تعاملی با MapSVG، جایگزین مناسبی است.
با استفاده از این افزونه وردپرس، میتوانید نقشه خود را با رنگها، جزئیات و قابلیتهایی که قبلاً فقط رویای آنها را در سر میپرورانید، سفارشی کنید.
برای ساخت بعدی خود، MapSVG را بررسی کنید ( طرح Elite برای توسعهدهندگان در حال حاضر ۳۳٪ تخفیف دارد ) .




ارسال نظر