آموزش اضافه کردن نقشه گوگل مپ در وردپرس

در سال‌های اخیر استفاده از نقشه الکترونیکی کاربردهای زیادی پیدا کرده است. از مسیریابی گرفته تا مشخص کردن لوکیشن‌های مختلف، همگی می‌توانند کاربردهای مؤثری در زندگی ما داشته باشند و حمل و نقل را آسان کنند. از این رو نقشه‌ها برای نمایش لوکیشن محل کسب و کار و شرکت بسیار کاربردی و مفید است؛ مخصوصاً اگر در وب‌سایت نمایش داده شود. از آنجا که سیستم مدیریت محتوای وردپرس محبوبیت بسیار بالایی دارد و اکثر وب‌سایت‌های شرکتی و فروشگاهی با این CMS راه اندازی شده‌اند، آموزش اضافه کردن نقشه گوگل به وردپرس خالی از لطف نیست و می‌تواند برای کسب و کارهای اینترنتی بسیار کاربردی باشد. در این مقاله سرویس‌های نقشه اینترنتی را معرفی می‌کنیم و راهکارهای افزودن نقشه به وردپرس را مورد بررسی قرار می‌دهیم.

 

سرویس نقشه گوگل

سرویس نقشه گوگل (به انگلیسی: Google Maps) یک پلتفرم جامع مبتنی بر وب است که به کاربران امکان می‌دهد نقشه‌ها، تصاویر ماهواره‌ای، تصاویر سه‌بعدی و اطلاعات مربوط به مکان‌های مختلف در سراسر جهان را مشاهده و کاوش کنند. رایگان بودن گوگل مپ و درعین حال دقت و جامع بودن آن باعث شده تا گوگل مپ به عنوان اولین گزینه بین کاربران محبوب باشد. نقشه‌ها گوگل از مناطق محروم و کشورهای درحال توسعه نیز در دسترس است و همین موضوع که گوگل در این مناطق هم سرویس‌دهی می‌کند، یک پوئن مثبت برای آن بحساب می‌آید.

 حتی با اینکه شرکت گوگل در ایران هیچ نمایندگی ندارد، اما نقشه ایران را با دقت و جزئیات بسیار زیاد نمایش می‌دهد. با تمام امکاناتی که گوگل مپ در اختیار کاربران قرار داده است، بخش توسعه آن را برای توسعه دهندگان ایرانی محدود کرده و به سختی می‌توان از این بخش در وب‌سایت‌ها استفاده کرد. این سرویس امکانات گسترده‌ای را ارائه می‌دهد که می‌توان به موارد زیر اشاره کرد:

• جستجو : کاربران می‌توانند با استفاده از نام مکان، آدرس، کد پستی یا کلمات کلیدی به دنبال مکان‌های مورد نظر خود بگردند.

• مسیر یابی : نقشه گوگل می‌تواند مسیرهای رانندگی، دوچرخه‌سواری، پیاده‌روی و حمل و نقل عمومی را بین دو نقطه یا بیشتر ارائه دهد.

• نمایش اطلاعات مکان : برای بسیاری از مکان‌ها، نقشه گوگل اطلاعات مفیدی مانند آدرس، شماره تلفن، ساعات کاری، وب‌سایت، عکس‌ها و نظرات کاربران را نمایش می‌دهد.

• نقشه‌های سفارشی : کاربران می‌توانند با اضافه کردن علائم، خطوط و اشکال، نقشه‌های سفارشی خود را ایجاد کنند.

• اشتراک‌گذاری مکان : کاربران می‌توانند مکان خود را با دیگران به اشتراک بگذارند یا مکان‌های مورد علاقه خود را ذخیره کنند.

• دسترسی آفلاین : کاربران می‌توانند نقشه‌ها را دانلود کنند و در حالت آفلاین استفاده کنند.

• اپلیکیشن موبایل : نقشه گوگل برای دستگاه‌های اندروید و iOS به صورت رایگان در دسترس است.

راهنمای استفاده از سرویس Google Map در وب‌سایت و وردپرس

روش اول : افزودن بلوک نقشه گوگل در صفحه سازها

از آنجا که قالب‌های ودرپرس حرفه‌ای در 90 درصد موارد از صفحه سازها استفاده می‌کنند، بصورت پیشفرض قابلیت افزودن بلوک نقشه در آنها تعبیه شده است و دیگر نیازی به نصب افزونه و یا حتی افزودن کدهای iframe یا برنامه نویسی با API نیاز نیست. همین ویژگی راحتی در استفاده، صفحه سازها را به ابزاری محبوب تبدیل کرده است. درحال حاظر 4 صفحه ساز Elementor ، Visual Composer ، Divi  و UX Builder وجود دارند که همگی قابلیت افزودن نقشه را در خود جای داده اند. اما در این میان دو صفحه ساز Elementor و Visual Composor بیشترین کاربرد را بین وب‌مسترهای ایرانی دارد. در ادامه اضافه کردن گوگل مپ در وردپرس را به کمک این دو صفحه ساز بررسی خواهیم کرد.

 

افزودن نقشه گوگل به کمک صفحه ساز Elementor

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

پس از وارد کردن بلوک نقشه گوگل، در تنظیمات این بلوک و در کادر مکان، آدرس مورد نظر خود را تایپ کنید تا لوکیشن نقشه تنظیم شود. همچنین می‌توانید اسکرول گزینه بزرگنمایی را تنظیم کنید.

نکته : بلوک نقشه گوگل در المنتور بصورت iframe کار می‌مند و نمی‌توان از امکانات ان مانند نشانگر استفاده کرد. اگر می‌خواهید از همه امکانات و ابزارهای نقشه گوگل در بلوک نقشه در المنتور استفاده کنید، می‌بایست از ابتدا کلید API نقشه گوگل را از پنل توسعه دهنده گوگل دریافت کنید و سپس این کلید را در صفحه تنظیمات المنتور و سربرگ یکپارچه سازی، وارد فیلد کلید API کنید و بر روی ذخیره تغییرات کلیک کنید تا SDK اصلی گوگل برای نمایش نقشه‌های حرفه‌ای در المنتور فعال شود.

 

افزودن نقشه گوگل در صفحه ساز Visual Composer

اگرچه صفحه ساز المنتور در چند سال اخیر توانسته از ویژوال کامپوزر پیشی بگیرد، اما در بعضی از قالب‌های محبوب همچون Impreza همچنان از صفحه ساز ویژوال کامپوزر استفاده می‌شود. بنابراین خالی از لطف نیست اگر افزودن نقشه در این صفحه ساز قدیمی را نیز بررسی کنیم. برای این منظور ابتدا در صفحه مورد نظر وارد ویرایشگر صفحه در حالت Visual Composer شوید و از بلوک‌های آماده، نقشه گوگل را به صفحه اضافه کنید. برای پیدا کردن این بلوک، می‌توانید عبارت "Map" یا "نقشه" را در کادر بالای بلوک‌ها جستجو کنید تا تنها بلوک نقشه گوگل نمایش داده شود.

پس از وارد کردن بلوک نقشه گوگل، در تنظیمات این بلوک در کادر Map Center Latitude و Map Center Longitude مختصات منطقه مورد نظر خود را وارد کنید. اگر می‌خواهید به نقشه نشانگر اضافه کنید، در کادر Point بر روی دکمه Add Point کلیک کنید تا تنظیمات نشانگر نمایش داده شود. سپس مشخصات نشانگر مانند مختصات، (عنوان و توضیحات در صورت نیاز) وارد کنید. می‌توانید با گزینه Pointer Color رنگ نشانگر را نیز تنظیم کنید. در فیلد Map Height اندازه نقشه در صفحه را به پیکسل وارد کنید.

در فیلد Desktop View Zoom مقدار بزرگنمایی در حالت نمایش در دسکتاپ را وارد کنید. در فیلد Mobile View Zoom مقدار بزرگنمایی در حالت نمایش در موبایل را وارد کنید. در آخر بر روی دکمه Save changes کلیک کنید تا تنظیمات آن اعمال شود.

 

روش دوم : استفاده از افزونه WP Go Maps

اگر به هر دلیلی نمی‌توانید از صفحه سازها استفاده کنید، بهترین راهکار استفاده از افزونه نقشه است که به شما کمک می‌کند تا در هر جا از صفحات وردپرس که بخواهید، نقشه را جایگذاری کنید. از آنجا که سرویس گوگل مپ بین کاربران بسیار معروف و محبوب است، افزونه‌های زیادی جهت افزودن نقشه‌های گوگل نیز توسعه یافته‌اند. اما در میان این افزونه‌ها، اولین گزینه WP Go Maps است که علاوه بر امکانات فراوان، در دو نسخه رایگان و حرفه‌ای قابل استفاده است. برای دانلود و نصب نسخه رایگان می‌توانید به مخزن وردپرس مراجعه کنید و برای تهیه نسخه حرفه‌ای به آدرس wpgmaps.com  مراجعه کنید.

ویژگی‌های افزونه WP Go Maps

• نقشه‌های متنوع : در کنار نقشه گوگل می‌توانید از نقشه‌های لایه باز دیگر نیز استفاده کنید.

• افزودن آسان نشانگر : می‌توانید تنها با تایپ کردن آدرس مورد نظر، به تعداد دلخواه نشانگر ایجاد کنید.

• نقشه‌های واکنشگرا : در این افزونه نقشه‌ها با توجه به اندازه صفحه نمایش داده می‌شوند و به اصطلاح Responsive هستند.

• دارای 9 طرح مختلف : می‌توانید از بین طرح‌های آماده نقشه‌ها، طرحی که به استایل قالب شما نزدیک‌تر است را انتخاب کنید.

• ایجاد استایل دلخواه : می‌تواند طرح و استایل دلخواه خود را با توجه به طرح قالب، ایجاد کنید.

• قابلیت بومی سازی : می‌توانید نقشه را بر اساس نیازهای خود بومی سازی کنید و از اطلاعات مورد نظر خود در آن استفاده کنید.

• حالت‌های مختلف نقشه : افزونه WP Go Maps از 4 حالت عمومی، جاده‌ای، جغرافیایی، ماهواره و ترکیبی پشتیبانی می‌کند.

• ابزارهای سفارشی سازی نمادها : در WP Go Maps امکان افزودن اشکال و تصاویر دلخواه وجود دارد.

 

روش سوم : استفاده از کد embed و تگ iframe

این روش بدون استفاده از افزودنه و کدنویسی‌های اضافه، براحتی نقشه گوگل را به وب‌سایت شما اضافه می‌کند. کافی است مراحل زیر را قدم به قدم انجام دهید :

1. در مرحله اول وارد وب‌سایت گوگل مپ به آدرس google.com/maps شوید و منطقه مدنظر خود را پیدا کرده و بر روی آن نقطه کلیک کنید تا نشانگر نقشه در آن نقطه ظاهر شود.

2. همزمان یک کادر زیر نقشه ظاهر می‌شود که مشخصات نقطه انتخابی شما را نمایش می‌دهد. در همین کادر دکمه اشتراک گذاری نیز وجود دارد. بر روی گزینه اشتراک گذاری کلیک کنید تا کادر آن باز شود. بر روی سربرگ جایگذاری کلیک کنید و سپس مانند نمونه زیر، روی گزینه "کپی HTML" کلیک کنید تا کد iframe در کلیپ برد کپی شود.

 

<iframe src='https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d4198.937854448608!2d51.417963134445905!3d35.66818356908414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfa!2suk!4v1714411060478!5m2!1sfa!2suk' width='600' height='450' style='border:0;' allowfullscreen='' loading='lazy' referrerpolicy='no-referrer-when-downgrade'></iframe>

 

3. در آخر کدی که کپی کردید را در بخشی از صفحه که مدنظر دارید، Paste کنید تا در وب‌سایت نمایش داده شود. اگر از صفحه سازها و یا ویرایشگر گوتنبرگ استفاده می‌کنید، می‌توانید یک بلاک "کد HTML" به صفحه اضافه کنید و سپس کدی که از گوگل مپ کپی کردید را درون آن تنظیم کنید.

 برای نمایش بهتر نقشه، می‌توانید کد iframe خود را درون یک تگ div قرار دهید و با استایل دلخواه، طراحی کادر آن را انجام دهید :

<div style="width:500px;max-width: 100%;height:300px;">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d4198.937854448608!2d51.417963134445905!3d35.66818356908414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfa!2suk!4v1714411060478!5m2!1sfa!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

 

روش چهارم : استفاده از کد جاوا اسکریپت و API

این روش کمتر استفاده می‌شود؛ اما اگر همچنان تمایل دارید تا خودتان وب‌سایت خود را توسعه دهید، می‌توانید با استفاده از SDK و API گوگل، نقشه گوگل را به وب‌سایت خود اضافه کنید. برای این منظور مراحل زیر را دنبال کنید :

1. ابتدا یک منطقه div در بخشی از صفحه خود در هر اندازه که می‌خواهید، ایجاد کنید و پارامتر id آن را map نامگذاری کنید.

<div id="googleMap" style="width:100%;height:400px;"></div>

2. سپس کد جاوا اسکریپت زیر را در صفحه قرار دهید. به دلیل وجود پارامتر defer تفاوتی ندارد در header قرار دهید و یا در footer . به نسبت پروژه خودتان هر جا که تمایل دارید این کد را اضافه کنید :

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

<script defer >
function myMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>

در این کد میبایست یک کلید API از پنل توسعه دهنده گوگل دریافت کنید و آن را در آدرس src و در پارامتر key جایگزین عبارت YOUR_KEY قرار دهید. با تابع LatLng ، موقعیت جغرافیایی نقشه را بر اساس Longitude , Latitude وارد کنید و برای تعیین مقدار بزرگنمایی، می‌توانید متغیر zoom را بین 0 تا 22 قرار دهید. عبارت googleMap در این کد اشاره به نام پارامتر id در تگ div در صفحه دارد.

 

دریافت آسان API Key برای نقشه گوگل

گوگل توسعه دهندگان ایرانی را تحریم کرده است و باید با ابزارهای دور زدن تحریم مانند سرویس شکن، از این سرویس‌ها استفاده کنید. بعلاوه ثبت نام در بخش توسعه دهندگان گوگل سخت شده و باید مراحل زیادی را طی کنید تا یک وب اپ را در پنل توسعه دهنده ثبت کنید و کلید API را دریافت کنید. در واقع بخش سخت کار همین است. در حال حاظر یک افزونه با نام API KEY for Google Maps وجود دارد که مراحل دریافت کلید API را بسیار آسان کرده است. این افزونه در مخزن وردپرس بصورت رایگان در دسترس است و  تنها کافی است پس از نصب و فعال‌سازی آن مراحل زیر را دنبال کنید.

1. از بخش تنظیمات، گزینه Google API KEY را کلیک کنید و در صفحه بعد بر روی دکمه Generate API Key کلیک کنید.

2. در پنجره‌ای که باز می‌شود شما مستقیم به بخش پروژه‌های توسعه گوگل متصل می‌شوید. در صورتی که از قبل پروژه‌ای را در پنل توسعه دهنده گوگل ایجاد کرده باشید، می‌توانید در این پنجره لیست آنها را ببینید، در غیر این صورت گزینه Add New Project برای شما فعال خواهد شد و با کلیک کردن بر روی آن مستقیم به صفحه ایجاد پروژه هدایت می‌شوید. پس از انتخاب پروژه، بر روی دکمه Enable API کلیک کنید.

3. در صفحه بعد کلید API مربوط به پروژه به شما نمایش داده می‌شود.

 سرویس نقشه OpenStreetMap

سرویس OpenStreetMap شاید ظاهراً ساده بنظر برسد، اما کاملاً رایگان و تحت مجوز Open Database License (ODbL) است و کاربرد بسیار آسانی دارد. علاوه بر این سرعت بالاتری نسبت به سایر سرویس‌ها دارد که همین هم آن را به گزینه مناسبی برای نقشه‌های ساده سازی شده کرده است. اطلاعات روی نقشه به اندازه‌ی سرویس نقشه گوگل کامل نیست اما آدرس‌ها و نام‌های رسمی که توسط سازمان‌های دولتی همچون شهرداری مقرر شده است را بطور کامل نمایش می‌دهد. سرویس OpenStreetMap  برای کسانی که به یک نقشه خلوت و ساده نیاز دارند، بسیار ایده‌آل است. برای دسترسی به این سرویس و اطلاعات بیشتر، به آدرس openstreetmap.org مراجعه کنید.

لازم به ذکر است، این سرویس هیچ گونه محدودیت و تحریم نسبت به کاربران ایرانی ندارد. این سرویس توسط بنیاد OpenStreetMap (OSMF) راه اندازی شده و مدیریت می‌شود. داده‌های این سرویس توسط میلیون‌ها کاربر داوطلب در سراسر جهان تأمین می‌شود. از ویژگی‌های OpenMap می‌توان به قابلیت مسیریابی، برنامه‌ریزی سفر، دریافت دستورالعمل برای مسافرت، نقشه برداری سازمانی برای شرکت‌ها و کسب و کارهای رسمی اشاره کرد. OpenMap می‌تواند برای تجزیه و تحلیل تحقیقات و موارد آموزشی در مدارس و دانشگاه‌ها استفاده کرد.

راهنمای استفاده از سرویس OpenStreetMap در وب‌سایت و وردپرس

نمایش OpenStreetMap در وب‌سایت بسیار ساده است و حتی نیازی به دردسرهای ثبت نام و دریافت API و SKD و مراحل خسته کننده ندارد. از آنجا که این سرویس برای کاربران ایرانی تحریم نیست، می‌تواند جایگزین مناسبی برای سرویس گوگل مپ باشد. برای افزودن OpenStreetMap به وب‌سایت و یا وردپرس، سه راهکار وجود دارد.

روش اول : نصب افزونه OSM – OpenStreetMap

این افزونه بصورت اختصاصی برای استفاده از سرویس OpenStreetMap توسعه یافته است و بصورت کاملاً رایگان قابل استفاده است. می‌توانید این افزونه را از مخزن وردپرس دانلود و نصب کنید.

ویژگی‌های افزونه OSM – OpenStreetMap

• حالت‌های مختلف نقشه : افزونه OSM از 4 حالت نقشه عمومی، نقشه دریایی، نقشه جغرافیایی و نقشه جاده‌ای پشتیبانی می‌کند.

• قابلیت ادغام در تمامی بخش‌های وردپرس : افزونه OSM قابلیت ادغام با انواع پست تایپ‌ها از جمله Post / Page / Widget را دارد.

• پنجره پاپ‌آب اطلاعات روی نقشه : می‌توانید یک پنجره به شکل ابر بالای لوکیشن مورد نظر خود برای نمایش توضیحات مورد نظرتان به نقشه اضافه کنید. این پنجره از کد HTML پشتیبانی می‌کند.

• لینک کردن نشانگر به یک پست خاص : می‌توانید نشانگر را به پست مرتبط با لوکیشن مورد نظر، لینک کنید.

• افزودن تگ‌های جغرافیایی به صفحه : تگ‌های جغرافیایی کمک می‌کنند تا صفحه و پست مورد نظر از نظر سئو به یک منطقه جغرافیایی خاص مرتبط شوند.

 

روش دوم : قرار دادن کد آماده iframe از پنل OpenStreetMap

در پنل کنترل این نقشه، می‌توانید با ابزار اشتراک گذاری Share از کادر Link or HTML گزینه HTML را فعال کنید و از کادری که ظاهر می‌شود، کد HTML که حاوی تگ iframe است را کپی کنید و در صفحه مورد نظر خود قرار دهید. اگر می‌خواهید نشانگر به نقشه اضافه کنید، گزینه Include marker را فعال کنید تا یک مارکر در وسط نقشه ظاهر شود. برای تنظیم کردن لوکیشن و تنظیم کردن نشانگر، کافی است نقشه را با کلیک موس بکشید و تنظیم کنید تا کد HTML بروز شود. سپس دوباره کد را کپی کنید. در Geo URI موقعیت لوکیشن Longitude , Latitude فعلی را می‌بینید که می‌توان از آن برای روش سوم نیز استفاده کرد. از این کد می‌توانید در صفحه سازها و ویرایشگر گوتنبرگ به کمک یک بلوک "کد HTML" نیز استفاده کنید.

نمونه کد iframe از سرویس OpenStreetMap :

<iframe width="425" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=51.43934011459351%2C35.79372840741722%2C51.46328687667847%2C35.804135865095326&amp;layer=mapnik&amp;marker=35.7989323066796%2C51.451313495635986" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=35.7989&amp;mlon=51.4513#map=16/35.7989/51.4513">View Larger Map</a></small>

 

روش سوم : استفاده از کتابخانه جاوا اسکریپت Leaflet

استفاده از این کتابخانه بسیار ساده است. Leaflet در واقع یک کامپوننت است که امکانات مرور نقشه را به صفحه اضافه می‌کند. در Leaflet هر نوع ساختار نقشه را می‌توان پیاده سازی کرد. اما در اینجا قصد داریم تا سرویس OpenStreetMap را با کتابخانه Leaflet ترکیب کنیم. برای این منظور مراحل زیر را دنبال کنید:

1. ابتدا کتابخانه leaflet را دانلود کنید در تگ head قرار دهید:

<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

2. سپس یک منطقه div در بخشی از صفحه خود در هر اندازه که می‌خواهید، ایجاد کنید و پارامتر id آن را map نامگذاری کنید.

<div id="map" class="map map-home leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" style="height: 300px; margin-top: 50px; position: relative; outline-style: none;" tabindex="0"></div>

3. در مرحله آخر کد جاوا اسکریپت زیر را در صفحه قرار دهید. به دلیل وجود پارامتر defer تفاوتی ندارد در header قرار دهید و یا در footer . به نسبت پروژه خودتان هر جا که تمایل دارید این کد را اضافه کنید:

<script defer>
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS popup.<br> Easily customizable.')
.openPopup();
</script>

در خط اول این اسکریپت، پارامتر id در تگ div یعنی map قرار دارد و سپس بلافاصله لوکیشن مورد نظرتان را در تابع setView مشخص کنید. در تابع setView به عنوان پارامتر اول، با یک آرایه از Longitude , Latitude لوکیشن مدنظر را قرار دهید و به عنوان پارامتر دوم مقدار بزرگنمایی اولیه را قرار می‌دهید. در این مثال لوکیشن بر روی [51.505, -0.09] تنظیم شده و بزرگنمایی نقشه 13 است. همچنین با کد L.marker([51.5, -0.09]).addTo(map) یک نشانگر به نقشه افزوده شده و با کد .bindPopup('A pretty CSS popup.<br> Easily customizable.') یک توضیح کوتاه بالای نشانگر قرار داده شده است.

 

سرویس نقشه MapBox

شاید تصور کنید سرویس گوگل مپ بهترین سرویس نقشه در جهان است، اما بهتر است سری به MapBox بزنید تا حرفه‌ای بودن این نقشه را لمس کنید. مپ‌باکس از خیلی جهات مشابه گوگل مپ است، اما ویژگی‌های بسیار زیادی دارد که آن را از هر سرویس دیگری متمایز می‌کند. مپ‌باکس قابلیت طراحی نقشه را با تنوع بسیار بالایی دارد و می‌توان رنگ بندی خود نقشه را با قالب وب‌سایت هماهنگ کرد. جالب است بدانید شرکت‌های مطرح و بزرگی همچون TOYOTA ، BMW ، T-Mobile برای مسیریابی سرویس‌های خود و شبکه‌های خبری مانند Financial Times ، CNN و The Weather Channel از این سرویس برای نمایش وضعیت آب و هوا استفاده می‌کنند.

ویژگی‌های کلیدی سرویس MapBox

• قابلیت سفارشی‌سازی: مپ‌باکس مجموعه‌ای از ابزارها و تنظیمات را برای طراحی نقشه با ظاهر و عملکرد سفارشی، در اختیار کاربر قرار می‌دهد تا همه بتوانند از نقشه‌ها، با توجه به طراحی، نیازها و برندسازی خود استفاده کنند.

• داده‌های بروز: Mapbox به داده‌های مکانی دقیق و به‌روز از منابع مختلف مانند OpenStreetMap، TomTom و HERE دسترسی دارد و به کاربر اطمینان می‌دهد که نقشه‌ها همیشه بروز و قابل اعتماد باشند.

• ابزارهای توسعه قدرتمند: Mapbox SDK ابزارهای جامع و کاربر پسندی را برای طیف وسیعی از پلتفرم‌ها از جمله وب، موبایل، دسکتاپ، VR و AR ارائه می‌دهد که به توسعه دهندگان امکان می‌دهد تا نقشه‌های خود را به راحتی با هر برنامه‌ای ادغام کنند.

• موارد استفاده متنوع: از نمایش مسیرهای رانندگی و دوچرخه‌سواری گرفته تا یافتن رستوران‌ها و مغازه‌ها، Mapbox مجموعه وسیعی از ویژگی‌ها را برای پاسخگویی به نیازهای مختلف ارائه می‌دهد.

• نقشه‌های 3D: مپ‌باکس امکان نمایش سه بعدی نقشه را فراهم می‌کند و می‌توان از آن برای پروژه‌های حرفه‌ای مانند تحقیقات مهندسی و پروژه‌های شهرسازی استفاده کرد.

• ایجاد نمودار داده‌ها بر روی نقشه: در MapBox این امکان وجود دارد که در نقشه تراکم یک داده خاص را نمایش دهید و تحلیل‌های علمی و آماری خود را بر اساس نقشه منتشر کنید.

• ابزارهای طراحی و سفارشی سازی نمادهای درون نقشه: اگر بخواهید در نقشه خود از اشکال و تصاویر خاصی استفاده کنید، مپ‌باکس ابزارهای مورد نیاز برای این کار را در اختیار شما قرار می‌دهد.

• ایجاد مسیریابی بر روی نقشه: در مپ‌باکس این امکان وجود دارد که مسیرهای مورد نظر خود را به کمک مسیریابی در خود مپ‌باکس ایجاد کنید.

• امکان استفاده رایگان برای کسب و کارهای کوچک و استارتاپ‌های نوپا: اگر بازدید وب‌سایت شما یا حتی صفحه‌ای که نقشه را در آن استفاده می‌کنید، نسبتاً پایین باشد، می‌توانید بصورت رایگان از MapBox استفاده کنید، درغیر این صورت باید برای بالاتر از 100000 بازدید در ماه، حق اشتراک پرداخت کنید.

• هوش مصنوعی MapGPT: این هوش مصنوعی بطور اختصاصی برای تحلیل و پرسش و پاسخ در نقشه طراحی شده است و همانند یک راهنمای گردشگری می‌تواند ویژگی‌های هر نقطه از نقشه را بطور دقیق و کامل توضیح دهد. علاوه بر این مسیریابی را هوشمندانه‌تر از قبل بررسی می‌کند و بهترین مسیر را از نظر مدت زمان ترافیک و طول مسیر مشخص می‌کند. این هوش مصنوعی با فناوری جدید TTS (Text To Speech) بسیار مشابه انسان صحبت می‌کند و کاربران احساس راحتی با آن دارند.بینش موقعیت مکانی عملی MapGPT از داده های زنده سرویس Mapbox استفاده می کند و عمیقاً با نرم افزار ناوبری آن یکپارچه شده است. همچنین این قابلیت را دارد که چهره و صدای هوش مصنوعی، به سلیقه کاربر سفارشی سازی شود.

• پیدا کردن نزدیک‌ترین محل شارژر برای خودروهای برقی: از آنجا که خودروهای برقی در چند سال اخیر محبوب شده‌اند، پایگاه‌هایی هم برای شارژ آنها در سراسر دنیا درنظر گرفته شده که به تازگی در سرویس MapBox نیز قابل ردیابی هستند.

• سرویس نمایش ترافیک Autopilot Map: این سرویس برای خودروهای خودران و سیستم‌های خلبان خودران نقشه ترافیکی زنده و لحظه به لحظه ارائه می‌دهد. به کمک این سرویس دقت خودروهای خودران بالاتر می‌رود و خودروها ترافیک امن‌تری خواهند داشت.

راهنمای استفاده از سرویس MapBox در وب‌سایت و وردپرس

استفاده از سرویس Mapbox در وب سایت شما شامل چند مرحله ساده است؛ البته برای وردپرس افزونه آماده هم وجود دارد که می‌توانید بدون دردسرهای برنامه نویسی از مپ‌باکس در وردپرس استفاده کنید. با این حال نیاز است مراحل زیر را برای ثبت نام و دریافت توکن API برای افزونه، طی کنید :

1. ایجاد حساب کاربری: به وب سایت Mapbox به آدرس mapbox.com بروید و یک حساب کاربری رایگان ایجاد کنید.

2. دریافت توکن دسترسی: برای استفاده از API های Mapbox، به یک توکن دسترسی نیاز دارید. می توانید از طریق کنسول Mapbox خود یک توکن جدید ایجاد کنید. در همین مرحله اگر از افزونه نقشه مبتنی بر MapBox مانند Treweler در WordPress استفاده می‌کنید، کافی است توکن خود را در تنظیمات افزونه قرار دهید و ادامه جایگذاری نقشه را از همان افزونه پیش ببرید و نیازی به ادامه مراحل 3 به بعد نیست؛ مگر اینکه از افزونه استفاده نکرده باشید و خودتان بخواهید کدهای نقشه را با برنامه نویسی در وردپرس قرار دهید.

3. انتخاب SDK: مپ‌باکس ابزارهای SDK را برای پلتفرم‌های مختلف از جمله وب، موبایل، دسکتاپ، VR و AR ارائه می دهد. SDK مناسب برای نیازهای خود را انتخاب کنید. قائدتاً برای استفاده در وب‌سایت و WordPress باید SDK مناسب Web را انتخاب کنید.

4. افزودن کتابخانه به پروژه خود: دستورالعمل های مربوط به SDK انتخابی خود را برای افزودن کتابخانه به پروژه وب خود دنبال کنید.

5. ایجاد یک نمونه نقشه: از یک قطعه کد نمونه برای ایجاد یک نمونه نقشه اولیه استفاده کنید.

6. سفارشی سازی نقشه: با استفاده از ابزارها و تنظیمات مختلف، می توانید ظاهر و عملکرد نقشه خود را مطابق با نیازها و برند خود سفارشی کنید.

7. افزودن ویژگی ها: می توانید با استفاده از API های Mapbox، ویژگی های مختلفی مانند نشانگرها، مسیرها، لایه های سفارشی و کنترل های نقشه به نقشه خود اضافه کنید.

 

افزونه Treweler برای نقشه‌های مبتنی بر MapBox

این افزونه برای افزودن نقشه‌های حرفه‌ای مبتنی بر سرویس MapBox طراحی شده است. این افزونه قابلیت‌های حرفه‌ای و بسیار زیادی دارد و از این رو در دو نسخه رایگان (برای استفاده عادی) و حرفه‌ای (برای استفاده وب‌سایت‌های گردشگری و مسافرتی) عرضه می‌شود. نسخه رایگان آن در مخزن وردپرس قابل دانلود و نصب است؛ اما برای تهیه نسخه حرفه‌ای می‌بایست به وب‌سایت آن به آدرس treweler.com مراجعه کنید.

ویژگی‌های افزونه Treweler (نسخه رایگان)

• یکپارچه‌سازی کامل: Treweler به طور کامل با پلتفرم وردپرس و Mapbox هماهنگ شده و تجربه‌ای بی‌نقص را برای شما به ارمغان می‌آورد.

• خلق نقشه‌های بی‌شماری: تنها با چند کلیک ساده، می‌توانید هر تعداد نقشه دلخواه خود را ایجاد و مدیریت کنید.

• نمایش نقشه در هر کجای وب‌سایت: نقشه‌های Treweler را در هر صفحه‌ای از وردپرس خود به صورت تمام صفحه به نمایش بگذارید.

• انتشار نقشه با کد کوتاه: از قدرت کد کوتاه برای انتشار نقشه خود در هر مکانی از وب‌سایتتان بهره ببرید.

• تنوع بی‌نظیر سبک‌های نقشه: Treweler مجموعه‌ای از سبک‌های نقشه پیش‌فرض را برای هر سلیقه‌ای ارائه می‌دهد.

• تنظیمات نقشه: مرکز جغرافیایی، سطح زوم، محدودیت بزرگنمایی، حرکت نقشه و نمایش کنترل‌های استاندارد را به دلخواه خود تنظیم کنید.

• برندینگ و سفارشی‌سازی: آرملوگوی Mapbox را مدیریت کنید، زبان برچسب‌های متنی را تغییر دهید و رنگ همپوشانی سفارشی به نقشه اضافه کنید.

• نمایش موقعیت مکانی کاربر: با فعال کردن این قابلیت، موقعیت مکانی کاربر در هنگام بارگذاری نقشه به طور خودکار نمایش داده می‌شود.

• پیش‌بارگذاری سفارشی: پیش‌بارگذاری سفارشی را با اطلاعات لوگو و متن دلخواه خود طراحی کنید تا قبل از بارگیری کامل نقشه به نمایش گذاشته شود.

• افزودن عنوان، توضیحات و لوگو: عنوان، توضیحات و لوگو را به نقشه خود اضافه کنید تا اطلاعات بیشتری به کاربران ارائه دهید.

• زمین و ساختمان‌های سه‌بعدی: با فعال کردن این قابلیت، نقشه شما به دنیایی سه‌بعدی و جذاب تبدیل می‌شود.

• طرح‌های سه‌بعدی متنوع: از بین طرح‌های سه‌بعدی مختلف کره زمین و تصاویر اضافی نقشه، طرح دلخواه خود را انتخاب کنید.

ویژگی‌های افزونه Treweler (نسخه حرفه‌ای)

• محدود کردن بزرگنمایی: مشخص کردن محدوده بزرگنمایی نقشه.

• غیر فعال کردن محدوده مختصات: حرکت نقشه را به مختصات محدود کنید یا آن را کاملاً غیرفعال کنید.

• نمایش یک نقشه واحد یا چندین نسخه از نقشه: می‌توانید نقشه خود را بر اساس داده‌ها و کاربردهای مختلف تنظیم کنید تا رنگ و اطلاعات بر اساس کاربرد مورد نظر شما تغییر کند.

• رنگ سفارشی: استفاده از رنگ دلخواه بر روی نقشه اصلی.

• مکان فعلی کاربر: قابلیت نمایش خودکار مکان فعلی کاربر در بارگذاری اولیه نقشه.

• ویجت توضیحات: ویجت‌های اطلاعاتی روی نقشه قرار دهید.

• تعیین موقعیت جغرافیایی کاربر:  این ویژگی، موقعیت جغرافیایی کاربر را نمایش می‌دهد.

 

سرویس‌های ایرانی نقشه آنلاین

ممکن است به دلیل تحریم‌ها و احتمال نوسان اینترنت در زمان‌های خاص دسترسی وب‌سایت شما از سرویس‌های خارجی قطع شود. این موضوع زمانی حائز اهمیت است که وب‌سایت شما یک سرویس بزرگ خدمات آنلاین مبتنی بر نقشه باشد. در این صورت کل سرویس شما نیز همزمان با زیرساخت‌های خارجی از دسترس خارج می‌شود. مخصوصاً سرویس‌هایی که از API استفاده می‌کنند. در این حالت بهتر است برای آپتایم سرویس خودتان، از سرویس نقشه ایرانی استفاده کنید. همچنین سرویس‌های ایرانی همراه با آدرس‌ها و نام گذاری‌های کامل‌تر، بسیار بومی‌تر هستند و از آنجا که دسترسی بهتری به اطلاعات رسمی دارند، جزئیات دقیق‌تر و بیشتری را در اختیار کاربران خود قرار می‌دهند. در ادامه 4 سرویس ایرانی را معرفی خواهیم کرد.

سرویس مپ.آی‌آر map.ir

سرویس مپ.آی‌آر یک نسخه بومی شده از سرویس OpenStreetMap است که سرورهای آن در ایران قرار دارد و اطلاعات و جزئیات بیشتری برای کشور ایران نمایش می‌دهد. این نقشه می‌تواند گزینه خوبی برای کسب و کارهای کوچک و بزرگ، توسعه دهندگان وب ، استارت‌آپ‌ها و سازمان‌های دولتی و غیردولتی باشد. خوشبختانه سرویس map.ir پلن رایگان هم دارد و کسب و کارهای کوچک بدون صرف هزینه می‌توانند از آن استفاده کنند. درحال حاظر سرویس‌های اسنپ (مانند تاکسی اینترنتی، اسنپ‌فود، اسنپ باکس)، همراه اول، بانک مسکن، فروشگاه‌های شهروند، اینترنت ساتل، پرپروک، نوبهار، میاره و بسیاری از سرویس‌های مطرح از map.ir برای نقشه‌های خود استفاده می‌کنند.

از قابلیت‌های سرویس map.ir می‌توان به موارد زیر اشاره کرد:

• سرعت فوق‌العاده: نقشه مپ بدون هیچ‌گونه تاخیر یا کندی، اطلاعات را بارگذاری می‌کند.

• اطمینان‌پذیری بالا: با SLA واقعی 99.9%، از پایداری و در دسترس بودن دائمی نقشه‌های سرویس مپ مطمئن باشد.

• پلن‌های متنوع و مقرون به صرفه: نقشه مپ مجموعه از پلن‌های مناسب برای نیازهای مختلف شما را ارائه می‌دهد. از پلن‌های رایگان تا پلن‌های سازمانی، می‌توانید پلن متناسب با بودجه و نیازهایتان را پیدا کنید.

• استفاده رایگان تا سقف 3000 درخواست در روز: می‌توانید تا سقف 3000 درخواست از تمام سرویس‌های نقشه مپ به طور کاملاً رایگان استفاده کنید. این فرصتی عالی برای آشنایی با قابلیت‌های نقشه مپ و بررسی تناسب آن با نیازهایتان است.

 

افزودن سرویس مپ map.ir در وب‌سایت و ورپرس

برای افزودن نقشه‌های map.ir، دو روش در نظر گرفته شده است که به نسبت پروژه خود می‌توانید از آنها استفاده کنید. برای اطلاعات تکمیلی درباره بخش توسعه و برنامه نویسی به آدرس help.map.ir مراجعه کنید.

روش اول: استفاده از افزونه map.ir

سرویس map.ir افزونه وردپرس خود را برای استفاده آسان کاربران وردپرس توسعه داده است.

1. برای از آن ابتدا باید افزونه را از وب‌سایت رسمی مپ به آدرس help.map.ir/documentation/wordpressplugin دانلود کنید.

2. سپس کلید API که قبلاً از map.ir دریافت کرده‌اید را در تنظیمات افزونه اضافه کنید تا امکان استفاده از نقشه‌های مپ در وب‌سایت وردپرس شما فراهم شود.

روش دوم : استفاده از کد جاوا اسکریپت و API

این روش برای زمانی است که قصد دارید خودتان وب‌سایت را توسعه دهید و بدون استفاده از افزونه، از سرویس نقشه مپ استفاده کنید. برای این منظور مراحل زیر را دنبال کنید.

1. ابتدا کتابخانه map.ir را دانلود کنید و یا بصورت CDN و در تگ head قرار دهید :

<link rel="stylesheet" href="https://cdn.map.ir/web-sdk/1.4.2/css/mapp.min.css">
<link rel="stylesheet" href="https://cdn.map.ir/web-sdk/1.4.2/css/fa/style.css">
<script type="text/javascript" src="https://cdn.map.ir/web-sdk/1.4.2/js/jquery-3.2.1.min.js"></script>
<script defer type="text/javascript" src="https://cdn.map.ir/web-sdk/1.4.2/js/mapp.env.js"></script>
<script defer type="text/javascript" src="https://cdn.map.ir/web-sdk/1.4.2/js/mapp.min.js"></script>

2. سپس یک منطقه div در بخشی از صفحه خود در هر اندازه که می‌خواهید، ایجاد کنید و پارامتر id آن را map نامگذاری کنید.

<div id="map" style="width: 600px; height: 450px; background: #eee; border: 2px solid #aaa;"></div>

2. در آخر کد جاوا اسکریپت زیر را در صفحه قرار دهید. می‌توانید برای اجرای صحیح کد، پارامتر defer را به تگ script اضافه کنید و به نسبت پروژه خودتان هر جا که تمایل دارید این کد را اضافه کنید :

<script defer>
$(document).ready(function() {
var app = new Mapp({
element: '#map',
presets: {
latlng: {
lat: 32,
lng: 52,
},
zoom: 6,
},
apiKey: 'YOUR_API_KEY'
});
app.addLayers();
});
</script>

در این کد میبایست یک کلید API از پنل توسعه دهنده map.ir دریافت کنید و آن را در متغیر apiKey و جایگزین عبارت YOUR_API_KEY قرار دهید. در متغیر latlng ، موقعیت جغرافیایی نقشه را بر اساس Longitude , Latitude در مقادیر lat و lng بصورت Object وارد کنید و برای تعیین مقدار بزرگنمایی، می‌توانید متغیر zoom را بین 0 تا 22 قرار دهید. عبارت #map در مقدار element اشاره به نام پارامتر id در تگ div در صفحه دارد.

 

سرویس نقشه سیدار مپ

سرویس سیدار مپ تا حدود زیادی مشابه سرویس MapBox است و تمرکز خود را روی مسیریابی هوشمند گذاشته است. درحال حاظر سرویس‌های ماکسیم، کابین، الوپیک، منحنی، پیدو، اسپید، کی کجاس سیدار مپ برای نقشه‌های خود استفاده می‌کنند.

ویژگی‌های سرویس سیدار مپ

تبدیل نقطه جغرافیایی به آدرس: یکی از خدمات منحصر به فرد سیدار مپ که مورد توجه اکثر سرویس‌های مکان محور قرار گرفته است. با استفاده از این سرویس، می‌توانید موقعیت جغرافیایی دقیق خود را به آدرسی محاوره‌ای و قابل فهم برای انسان تبدیل کنید. این قابلیت برای رانندگان تاکسی، پیک‌ها، خدمات امدادی و سایر کسب و کارهای وابسته به مکان بسیار مفید است.

• جستجو در معابر: به سرعت و به آسانی در بین تمامی خیابان‌ها، کوچه‌ها، میادین، محلات و به طور کلی همه معابر شهر جستجو کنید. محل مورد نظر خود را به سرعت روی نقشه پیدا کنید و اطلاعات مربوط به آن را مشاهده نمایید. این قابلیت برای افراد ناآشنا به یک منطقه خاص یا برای یافتن سریع آدرس یک مکان بسیار کاربردی است.

• مسیریابی و برنامه ریزی سفر: بین نقطه مبدا و مقصد مورد نظر خود مسیریابی دقیق و بهینه انجام دهید. حتی می‌توانید نقاط میانی برای توقف در بین مسیر تعیین کنید تا مسیر پیشنهادی حتماً از آن نقاط عبور کند. هیچ محدودیتی برای تعداد این نقاط میانی وجود ندارد و می‌توانید سفر خود را به طور کامل برنامه‌ریزی کنید. این قابلیت برای مسافرت‌های بین شهری، گشت و گذار در شهر و انجام کارهای روزانه بسیار مفید است.

• نقشه‌های استاتیک: بدون نیاز به استفاده از هیچ کتابخانه خاصی، می‌توانید تصویری از نقشه فارسی سیدار مپ را به راحتی در صفحه وب یا اپلیکیشن موبایل خود قرار دهید. این قابلیت برای نمایش موقعیت مکانی یک کسب و کار، نشان دادن مسیر یک رویداد یا به اشتراک گذاشتن اطلاعات مکانی در وب سایت یا اپلیکیشن شما بسیار کاربردی است.

• استفاده رایگان تا سقف 2000 درخواست در روز: می‌توانید تا سقف 2000 درخواست و بارگذاری 10000 نقشه در روز از سرویس سیدار مپ به طور کاملاً رایگان استفاده کنید. این پلن برای کسب و کارهای تازه تأسیس می‌تواند کاربردی باشد.

 

افزودن سرویس سیدار مپ در وب‌سایت و ورپرس

برای افزودن نقشه‌های سیدار مپ، دو روش نصب افزونه و کدنویسی در نظر گرفته شده است که به نسبت پروژه خود می‌توانید از آنها استفاده کنید. برای اطلاعات تکمیلی درباره بخش توسعه و برنامه نویسی به آدرس api.cedarmaps.com/docs مراجعه کنید.

روش اول: استفاده از افزونه سیدار مپ

سرویس نشان نیز برای سهولت کار توسعه دهندگان، افزونه وردپرس خود را توسعه داده است.

1. برای از آن ابتدا باید افزونه را از مخزن وردپس و یا وب‌سایت رسمی سیدار مپ به آدرس api.cedarmaps.com/docs دانلود و نصب کنید.

2. سپس کلید API که قبلاً از پنل کاربری سیدار مپ دریافت کرده‌اید را در تنظیمات افزونه اضافه کنید تا نقشه‌های سیدار مپ در وب‌سایت وردپرس شما فعال شود.

 

روش دوم : استفاده از کد جاوا اسکریپت و API

این روش برای زمانی است که قصد دارید خودتان وب‌سایت را توسعه دهید و بدون استفاده از افزونه، از سرویس نقشه نشان استفاده کنید. برای این منظور مراحل زیر را دنبال کنید.

1. ابتدا کتابخانه Cedarmaps را از CDN سیدار در تگ head قرار دهید :

<script src='https://api.cedarmaps.com/cedarmaps.js/v1.8.0/cedarmaps.js'></script>
<link href='https://api.cedarmaps.com/cedarmaps.js/v1.8.0/cedarmaps.css' rel='stylesheet' />

2. سپس یک منطقه div در بخشی از صفحه خود در هر اندازه که می‌خواهید، ایجاد کنید و پارامتر id آن را map نامگذاری کنید.

<div id="map" style="width: 600px; height: 450px; background: #eee; border: 2px solid #aaa;"></div>
2. در آخر کد جاوا اسکریپت زیر را در صفحه قرار دهید. می‌توانید برای اجرای صحیح کد، پارامتر defer را به تگ script اضافه کنید و به نسبت پروژه خودتان هر جا که تمایل دارید این کد را اضافه کنید :

<script defer type="text/javascript">
L.cedarmaps.accessToken = "YOUR_ACCESS_TOKEN"; // See the note below on how to get an access token
// Getting maps info from a tileJSON source
var tileJSONUrl = 'https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token=' + L.cedarmaps.accessToken;
// initilizing map into div#map
var map = L.cedarmaps.map('map', tileJSONUrl, {
scrollWheelZoom: true
}).setView([35.757448286487595, 51.40876293182373], 15);

L.cedarmaps.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS popup.<br> Easily customizable.')
.openPopup();
</script>

در این کد میبایست یک کلید API از پنل توسعه دهنده سیدار مپ دریافت کنید و آن را در متغیر L.cedarmaps.accessToken و جایگزین عبارت YOUR_ACCESS_TOKEN قرار دهید. در متغیر map و تابع L.cedarmaps.map ، پارامتر id در تگ div یعنی map قرار دارد و سپس بلافاصله لوکیشن مورد نظرتان را در تابع setView مشخص کنید. در تابع setView به عنوان پارامتر اول، با یک آرایه از Longitude , Latitude لوکیشن مدنظر را قرار دهید و به عنوان پارامتر دوم مقدار بزرگنمایی اولیه را قرار می‌دهید. در این مثال لوکیشن بر روی [51.505, -0.09] تنظیم شده و بزرگنمایی نقشه 13 است. همچنین با کد L.cedarmaps.marker([51.5, -0.09]).addTo(map) یک نشانگر به نقشه افزوده شده و با کد .bindPopup('A pretty CSS popup.<br> Easily customizable.') یک توضیح کوتاه بالای نشانگر قرار داده شده است.

 

سرویس نقشه نشان

نشان neshan.org یکی از پلتفرم‌های معروف که بیشتر آن را با اپلیکیشن مسیریابی نشان می‌شناسیم، سرویس نقشه خود را برای توسعه اپلیکیشن‌های ایرانی نیز ارائه کرده است. سرویس نشان بطور تخصصی بر روی ترافیک و حمل و نقل شهری و جاده‌ای تمرکز دارد. استفاده از این سرویس برای توسعه اپلیکیشن و وب‌سایت رایگان نیست، اما با توجه به قابلیت‌های بی‌شمار آن، ارزش سرمایه گذاری را دارد. لازم به ذکر است که سرویس نشان برای تمامی پلفرم‌ها از جمله موبایل، وب و کتابخانه‌های ReactJS و Vue.JS ابزارهای SDK ارائه می‌دهد؛ که برای استفاده از آنها و مطالعه مستندات، می‌توانید به آدرس platform.neshan.org مراجعه کنید.

از قابلیت‌های نقشه نشان می‌توان به موارد زیر اشاره کرد :

• مسیریابی خودرو : مسیریابی با درنظر گرفتن ترافیک آنلاین.

• جستجو و مسیریابی آفلاین : در تمام استان های ایران و کشورهای مقصد سفر ایرانیان.

• سخن‌گوی هوشمند نشــان : قابلیت اعلام مسیر و تابلوهای پیش رو.

• مسیریابی بر اساس طرح‌های ترافیک : در تهران و کلان‌شهر ها.

• رادار جاده‌ای : نمایش فاصله تا اماکن رفاهی، پمپ بنزین، مسجد و هلال احمر در جاده‌های بین شهری.

• نمایش عوارضی : نمایش عوارضی جاده‌‌ها و هزینه هر مسیر.

• مسیریابی موتور : با درنظر گرفتن معابری که تردد موتور در آن‌ها ممنوع است.

• مسیریابی حمل‌ونقل همگانی : با نمایش خطوط هر ایستگاه، هزینه سفر و نمایش زمان رسیدن اتوبوس در مشهد و تهران.

• مسیریابی پیاده و دوچرخه : همراه با نمایش شیب و گام‌های مسیر.

• کروز کنترل : هشدار درصورت رد شدن از سرعت تعیین شده.

 

افزودن سرویس نشان در وب‌سایت و ورپرس

برای افزودن نقشه‌های نشان، 3 روش در نظر گرفته شده است که به نسبت پروژه خود می‌توانید از آنها استفاده کنید. برای اطلاعات تکمیلی درباره بخش توسعه و برنامه نویسی به آدرس platform.neshan.org مراجعه کنید.

روش اول: استفاده از افزونه نشان

سرویس نشان نیز برای سهولت کار توسعه دهندگان، افزونه وردپرس خود را توسعه داده است.

1. برای از آن ابتدا باید افزونه را از وب‌سایت رسمی نشان به آدرس platform.neshan.org/sdk/wordpress-addon دانلود کنید.

2. سپس کلید API که قبلاً از نشان دریافت کرده‌اید را در تنظیمات افزونه اضافه کنید تا امکان استفاده از نقشه‌های نشان در وب‌سایت وردپرس شما فراهم شود.

روش دوم : استفاده از کد جاوا اسکریپت و API

این روش برای زمانی است که قصد دارید خودتان وب‌سایت را توسعه دهید و بدون استفاده از افزونه، از سرویس نقشه نشان استفاده کنید. برای این منظور مراحل زیر را دنبال کنید.

1. ابتدا کتابخانه leaflet را از CDN نشان در تگ head قرار دهید :

<link href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css" rel="stylesheet" type="text/css">
<script src="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.js" type="text/javascript"></script>

2. سپس یک منطقه div در بخشی از صفحه خود در هر اندازه که می‌خواهید، ایجاد کنید و پارامتر id آن را map نامگذاری کنید.

<div id="map" style="width: 600px; height: 450px; background: #eee; border: 2px solid #aaa;"></div>

2. در آخر کد جاوا اسکریپت زیر را در صفحه قرار دهید. می‌توانید برای اجرای صحیح کد، پارامتر defer را به تگ script اضافه کنید و به نسبت پروژه خودتان هر جا که تمایل دارید این کد را اضافه کنید :

<script defer type="text/javascript">
var myMap = new L.Map('map', {
key: 'YOUR_API_KEY',
maptype: 'dreamy',
center: [35.699739, 51.338097],
zoom: 14,
traffic: true,
onTrafficLayerSwitched: function (state) {
console.log(state);
}
});
</script>

در این کد میبایست یک کلید API از پنل توسعه دهنده نشان دریافت کنید و آن را در متغیر key و جایگزین عبارت YOUR_API_KEY قرار دهید. در متغیر center ، موقعیت جغرافیایی نقشه را بر اساس Longitude , Latitude درون یک آرایه وارد کنید و برای تعیین مقدار بزرگنمایی، می‌توانید متغیر zoom را بین 0 تا 22 قرار دهید. عبارت map در این کد اشاره به نام پارامتر id در تگ div در صفحه دارد.

 

سرویس نقشه پارسی‌مپ

پارسی‌مپ parsimap.ir نیز یکی دیگر از سرویس‌های نقشه آنلاین است که کاربرانی همچون تپسی، ایساکو، دیجی‌کالا، تیمچه مشتریان این سرویس هستند. از این رو می‌توان گفت از سرعت و کیفیت بالایی برخوردار است. پارسی‌مپ همانند نشان و سیدار مپ، از کتابخانه Leaflet پشتیبانی می‌کند و با توجه به کتابخانه‌ها و SDK غنی در کنار مستندات کامل، کاربرد آن آسان است. پارسی‌مپ بصورت پیشفرض افزونه "نقشه لوکیشن پرداخت در صورتحساب فروشگاه" را پشتیبانی می‌کند و فروشگاه دیجی‌کالا نیز از همین ویژگی در بخش تنظیم آدرس کاربران استفاده می‌کند. برای اطلاعات بیشتر، صفحه مستندات پارسی‌مپ را مطالعه کنید.

سرویس پارسی‌مپ ترکیبی از کتابخانه‌های OpenStreetMap و Mapbox را در نقشه‌های خود ادغام کرده است تا کاملترین نقشه بومی ایران را طراحی کند. می‌توان گفت پارسی‌مپ فراتر از یک نقشه‌ی ساده است. این پلتفرم قدرتمند، با استفاده از فناوری‌های پیشرفته، به شما امکان می‌دهد تا داده‌های فضایی-زمانی عظیم را از منابع مختلف پردازش، تجزیه و تحلیل و به صورت نقشه‌های تحلیلی و نمودارهای تطبیقی ارائه کنید. پاسخگویی به بیش از ۱۰۰ میلیون تراکنش در روز، نشان‌دهنده‌ی زیرساخت‌های قدرتمند و پویای پارسی‌مپ است. همچنین عملکرد بالا با پشتیبانی از حداقل ۵۰,۰۰۰ تراکنش در ثانیه، سرعت و بی‌وقفه بودن خدمات پارسی‌مپ را تضمین می‌کند. پایداری فوق‌العاده سرویس پارسی‌مپ با تنها ۱۴ دقیقه قطعی در ۲ سال اخیر، خیال شما را از در دسترس بودن دائمی پارسی‌مپ راحت می‌کند؛ و این به معنی 99 درصد آپتایم این سرویس است.

 

از قابلیت‌های نقشه پارسی‌مپ می‌توان به موارد زیر اشاره کرد:

• تبدیل داده‌های مکانی به نقشه‌های تحلیلی : اطلاعات جمع‌آوری شده از منابع مختلف مانند سنسورها، دوربین‌ها، پایگاه‌های داده و ... را به صورت بصری و قابل فهم در قالب نقشه‌های تحلیلی نمایش دهید.

• شناسایی الگوها و روندها : با تجزیه و تحلیل داده‌های مکانی، الگوها و روندهای پنهان را در داده‌های خود کشف کنید و از آنها برای تصمیم‌گیری‌های آگاهانه‌تر استفاده کنید.

• اطلاعات قابل درک : با استفاده از نقشه‌های تحلیلی و نمودارهای تطبیقی، اطلاعات خود را به طور شفاف و قابل فهم به دیگران منتقل کنید.

• تصمیمات مبتنی بر داده‌ها : از قدرت تجسم داده‌های مکانی برای درک بهتر موقعیت‌های پیچیده و اتخاذ تصمیمات مبتنی بر داده استفاده کنید.

• آدرس‌یابی دقیق و هوشمند : تبدیل آدرس پستی به موقعیت جغرافیایی با استفاده از پیشرفته‌ترین الگوریتم‌های یادگیری بر اساس تاریخچه جستجو، می‌تواند نتایج را شخصی سازی کند و با تکمیل آدرس‌های کاربر، باعث سهولت استفاده از اپلیکیشن و صرفه‌جویی در زمان شود.

• آدرس‌یابی معکوس پیشرفته : با این ویژگی کاربران می‌توانند با تاچ کردن هر نقطه از نقشه، آدرس دقیق آن نقشه را به زبان فارسی و عامیانه، بدست آورند.

• نقشه‌های ارتفاعی دقیق و کاربردی : اندازه‌گیری ارتفاع در DEM (مدل ارتفاع رقومی) برای بررسی دقیق‌تر عوارض زمین.

• خدمات قابل اعتماد : دسترس بودن دائمی و آپ‌تایم 99 درصد پارسی‌مپ.

• مسیریابی هوشمند و بهینه : محاسبه کوتاهترین مسیر برای کاربران مالک اتوموبیل و موتور سیکلت با در نظر گرفتن شرایط ترافیکی. محاسبه ترافیک در برآورد زمان سفر برای ارائه زمان‌بندی دقیق و قابل اتکا. برآورد زمان سفر و مسافت مسیر در سفرهای چند منظوره برای برنامه‌ریزی بهتر سفرهای ترکیبی. مرتب سازی چندین مبداً به نقطه مقصد بر اساس فاصله برای یافتن سریع‌ترین و بهینه‌ترین مسیر.

 

افزودن سرویس پارسی‌مپ در وب‌سایت و ورپرس

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

استفاده از کد جاوا اسکریپت و API

این روش برای زمانی است که قصد دارید خودتان وب‌سایت را توسعه دهید و بدون استفاده از افزونه، از سرویس نقشه نشان استفاده کنید. برای این منظور مراحل زیر را دنبال کنید.

1. ابتدا کتابخانه leaflet را از CDN نشان در تگ head قرار دهید :

<script src="https://s3.azaronline.com/main{::BASE_CDN_URL}/third-party/leaflet/{::LEAFLET_JS_VERSION}/leaflet.js"></script>
<link href="{::BASE_CDN_URL}/third-party/leaflet/{::LEAFLET_JS_VERSION}/mapbox-gl.css"
rel="stylesheet" />
<script src="https://cdn.parsimap.ir/third-party/leaflet/plugins/parsimap-tile/v1.0.0/parsimap-tile.js"></script>

 

2. سپس یک منطقه div در بخشی از صفحه خود در هر اندازه که می‌خواهید، ایجاد کنید و پارامتر id آن را map نامگذاری کنید.

<div id="map" style="width: 600px; height: 450px; background: #eee; border: 2px solid #aaa;"></div>

2. در آخر کد جاوا اسکریپت زیر را در صفحه قرار دهید. می‌توانید برای اجرای صحیح کد، پارامتر defer را به تگ script اضافه کنید و به نسبت پروژه خودتان هر جا که تمایل دارید این کد را اضافه کنید :

<script defer >
const map = new L.Map('map', {
center: [35.7575, 51.41],
zoom: 6,
})L.parsimapTileLayer('parsimap-streets-v11-raster', {
key: 'PMI_MAP_TOKEN',
}).addTo(map)
</script>

در این کد میبایست یک کلید API از پنل توسعه دهنده نشان دریافت کنید و آن را در متغیر key و جایگزین عبارت PMI_MAP_TOKEN قرار دهید. در متغیر center ، موقعیت جغرافیایی نقشه را بر اساس Longitude , Latitude درون یک آرایه وارد کنید و برای تعیین مقدار بزرگنمایی، می‌توانید متغیر zoom را بین 0 تا 22 قرار دهید. عبارت map در این کد اشاره به نام پارامتر id در تگ div در صفحه دارد.

 

افزونه‌های پیشرفته نمایش نقشه در وردپرس

شیوه‌های مختلفی برای نمایش نقشه در وردپرس وجود دارد که می‌تواند وابستگی به سرویس‌های نقشه نگاری آنلاین را کم کند و حتی به بالا رفتن سرعت بارگذاری و کارایی وب‌سایت نیز کمک کند. در این بخش چند افزونه بسیار کاربردی نمایش نقشه در WordPress را بررسی خواهیم کرد که به طراحی وب‌سایت نیز کمک می‌کنند.

افزونه Mapster WP Maps برای نقشه‌های مبتنی بر MapBox

این افزونه دو سرویس نقشه Google Map و MapBox را در خود ادغام کرده است. ویژگی اصلی این افزونه رایگان بودن و سادگی در استفاده از آن است. این افزونه را می‌توانید از مخزن وردپرس دانلود و نصب کنید.

ویژگی‌های افزونه Mapster WP Maps

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

 

افزونه MapSVG

اگر به نقشه‌های حرفه‌ای با فرمت SVG دسترسی داشته باشید، به کمک این افزونه می‌توانید آنها را با قابلیت‌های فراوانی همچون بزرگ‌نمایی، نشانگر، صفحه بندی، سفارشی سازی و ... نمایش دهید. اگرچه مرورگر بدون نیاز به افزونه فایل SVG را نمایش می‌دهد، اما قابلیت‌های کنترل و شخصی سازی را ندارد و نمایش SVG بدون این قابلیت‌ها نقشه را استاتیک می‌کند. بنابراین این افزونه کمک می‌کند تا علاوه بر اینکه نقشه‌ها را بصورت حرفه‌ای در وردپرس نمایش دهید، سرعت بارگذاری کلی آن بالا برود و مستقل از تمامی سرویس‌ها کار کند. برای تهیه نسخه اصلی این افزونه به وب‌سایت رسمی آن به آدرس mapsvg.com مراجعه کنید.

ویژگی‌های افزونه MapSVG

• ایجاد نقشه : هر فایل تصویری و SVG را به یک نقشه تبدیل کنید.

• ترکیب با نقشه‌های گوگل : می‌توانید از گوگل مپ ساده یا با پوشش‌های سفارشی استفاده کنید.

• آمار، تجسم داده‌ها : می‌توانید بخش‌هایی از یک کشور یا منطقه را با رنگ‌های سفارشی و بسته به داده‌های خود تنظیم کنید.

• اشیاء سفارشی : هر نوع شکلی که مورد نیاز است را ایجاد کنید و آنها را روی نقشه خود به کاربران نشان دهید.

• فیلدهای سفارشی : شما می‌توانید انواع فیلدها مثل متن، کادر متنی، تصویر، انتخاب‌گر فایل، چند انتخاب، رادیو، چک باکس و… را به نقشه خود اضافه کنید.

• آپلود کننده تصویر : افزونه MapSVG قابلیت پیوست کردن تصاویر به نقشه را دارد و می‌توان اندازه تصاویر را نسبت به نقشه تنظیم کرد.

• درون ریزی CSV : می‌توانید اطلاعات نقشه مورد نظر خود را در قالب یک فایل CSV به نقشه اضافه کنید.

• افزودن محتوا : با این ویژگی می‌توانید برای هر بخش از نقشه، توضیحات اضافه کنید تا کاربر با کلیک کردن بر روی آن، متن توضیحات را مشاهده کند.

• صفحه بندی : داده های بارگذاری شده روی نقشه خود را به صفحات تقسیم کنید.

• نشانگرها : می توانید نشانگرهای مکان را به سادگی با وارد کردن آدرس اضافه نمائید.

• بی نهایت نشانگر : می توانید 1000 نشانگر را همزمان بدون صفحه بندی نشان دهید.

• فیلترها : می توانید قابلیت فیلتر را به فیلدهای سفارش خود اضافه کنید.

• جستجو درون نقشه : با این ویژگی می‌توانید درون نقشه یک فیلد جستجو اضافه کنید تا کاربر بر اساس داده‌هایی که بر روی نقشه تنظیم کرده‌اید، قادر به جستجوی بخش‌های مختلف باشد.

• قالب‌ها : می توانید روی ظاهر محتوای خود کنترل داشته باشید و از طرح‌ها و سبک‌های مختلف نقشه استفاده کنید.

• ویرایشگر CSS : می‌توانید کدهای CSS و Style را به سلیقه خود به نقشه اضافه کنید تا طراحی قسمت‌های مختلف با وب‌سایت شما هماهنگ شود.

• سازگار با موبایل : طرح نقشه‌های به نسبت اندازه صفحه نمایش تنظیم می‌شود.

 

 

افزونه 3D Mapper

نقشه‌های سه بعدی کاربرد حرفه‌ای تری دارند. به کمک نقشه سه بعدی می‌تواند مناطق گردشگری و طبیعت را به صورت سه بعدی در وب‌سایت خود نمایش دهد. نقشه سه بعدی می‌تواند در وب‌سایت‌های گردشگری و رزرو هتل و تورهای مسافرتی بسیار کاربردی باشد. مخصوصاً زمانی که کاربران شما عاشق تورهای گردشگری و طبیعت گردی باشند. با استفاده از این افزونه، می‌توانید به بازدیدکنندگان خود تجربه‌ای جذاب و منحصر به فرد از مکان‌ها، رویدادها یا هر نوع اطلاعات مکانی دیگر ارائه دهید. برای تهیه این افزونه جذاب می‌توانید به وب‌سایت رسمی آن به آدرس 3d-mapper.com مراجعه کنید.

ویژگی‌های افزونه 3D Mapper

• گزینه‌های جستجوی متنوع : با استفاده از جستجوی قدرتمند این افزونه، به راحتی می‌توانید مکان مورد نظر خود را پیدا کنید.

• طرح‌بندی‌های نقشه : 3D Map طیف وسیعی از طرح‌بندی‌های نقشه از پیش طراحی شده را برای هر سلیقه‌ای ارائه می‌دهد.

• ویرایشگر نقشه : با استفاده از ویرایشگر قدرتمند این افزونه، می‌توانید نقشه خود را به طور کامل سفارشی کنید.

• افزودن نقشه با یک کلیک : نقشه‌های خود را از منابع مختلف به راحتی به 3D Map وارد کنید.

• ویرایش کامل نقشه : می‌توانید تمام ویژگی‌های نقشه خود را، از جمله مکان‌ها، مسیرها و تنظیمات، به طور کامل ویرایش کنید.

• جاسازی نقشه با کد کوتاه : نقشه‌های خود را در هر کجای وب‌سایت خود با استفاده از کد کوتاه جاسازی کنید.

• تنظیمات منطقه نمایش : می‌توانید اندازه بوم نقشه را مطابق با نیاز خود تنظیم کنید.

• پس زمینه شفاف : می‌توانید از یک پس زمینه شفاف برای ادغام کامل نقشه با وب‌سایت خود استفاده کنید. این گزینه به طراحی‌های مدرن کمک فراوانی می‌کند.

• افزودن تصویر یا رنگ پس زمینه : می‌توانید تصویر یا رنگ دلخواه خود را به عنوان پس زمینه نقشه اضافه کنید.

• غیرفعال کردن زوم و شیب : در صورت تمایل، می‌توانید زوم و شیب نقشه را غیرفعال کنید.

• مخفی کردن لبه‌های نقشه : برای ظاهری تمیزتر، می‌توانید لبه‌های نقشه را مخفی کنید.

 

افزونه Image Map Pro

این افزونه علاوه بر اینکه قابلیت ایجاد نقشه SVG را دارد، می‌تواند از طرح نقشه املاک نیز طرح SVG ایجاد کند. این قابلیت برای وب‌سایت‌های آگهی املاک بسیار کاربردی است. Image Map Pro افزونه‌ای قدرتمند برای وردپرس است که به شما امکان می‌دهد نقشه‌های تصویری تعاملی و خیره‌کننده را برای وب‌سایت خود ایجاد کنید. با استفاده از این افزونه، می‌توانید اطلاعات مکان‌های مختلف را به روشی جذاب و کاربرپسند به مخاطبان خود ارائه دهید. این افزونه برای کسب و کارهای محلی، وب‌سایت‌های گردشگری، مقاصد آموزشی و آگهی املاک و مستغلات بسیار کاربردی است. برای تهیه این افزونه به وب‌سایت رسمی آن به آدرس imagemappro.com مراجعه کنید.

ویژگی‌های افزونه Image Map Pro

• ایجاد انواع نقشه‌های تصویری : از نقشه‌های ساده کشورها تا پلان‌های پیچیده ساختمان‌ها، Image Map Pro به شما امکان می‌دهد هر نوع نقشه‌ای را که نیاز دارید ایجاد کنید.

• ابزارهای ویرایش قدرتمند : ویرایشگر پیشرفته این افزونه به شما امکان می‌دهد به طور کامل هر بخش از نقشه خود را از جمله اشکال، نشانگرها، رنگ‌ها و جلوه‌های ماوس را سفارشی کنید.

• قابلیت تعامل بالا : با استفاده از Image Map Pro می‌توانید نقاط مختلف نقشه خود را به کلیک، حرکت موس و سایر اقدامات کاربر مرتبط کنید.

• افزودن اشکال سفارشی : در این پلاگین علاوه بر اینکه نشانگرها، طرح‌ها، اشکال از پیش طراحی شده وجود دارد، می‌توانید اشکال و نشانگرهای منحصر به فرد خود را برای هماهنگ کردن با برندتان اضافه کنید.

• ریسپانسیو : نقشه‌های شما به طور خودکار در تمام دستگاه‌ها، از جمله دسکتاپ، تبلت و موبایل، به درستی نمایش داده می‌شوند.

 

افزونه Kikote

این افزونه قابلیت انتخاب آدرس از روی نقشه را برای فروشگاه ووکامرس امکانپذیر می‌کند. این قابلیت کمک می‌کند تا وارد کردن آدرس برای مشتری آسان شود و روند ثبت سفارش، سریع‌تر انجام شود. Kikote یک افزونه‌ قدرتمند برای ووکامرس است که به شما امکان می‌دهد فرآیند حمل و نقل را برای فروشگاه خود به طور کامل مدیریت و بهینه کنید. با استفاده از این افزونه، می‌توانید موقعیت مکانی مشتریان خود را به طور دقیق شناسایی کنید، آدرس‌های حمل و نقل و صورتحساب را به صورت خودکار پر کنید، قوانین نمایش نقشه را سفارشی کنید، نمای سفارشات را روی نقشه به مشتریان و خودتان نشان دهید و بسیاری از کارهای دیگر را انجام دهید. شما می‌توانید نسخه رایگان این افزونه را از مخزن وردپرس و یا نسخه حرفه‌ای را از وب‌سایت رسمی آن به آدرس lpacwp.com تهیه کنید.

ویژگی‌های افزونه Kikote

• شناسایی دقیق موقعیت مکانی مشتری : مشتریان می‌توانند نشانگر نقشه را در صورت عدم دقت جابجا کنند. موقعیت مکانی دقیق مشتریان برای محاسبه دقیق هزینه ارسال و زمان تحویل استفاده می‌شود.

• پر کردن خودکار آدرس حمل و نقل و صورتحساب : صرفه جویی در زمان مشتریان در هنگام پرداخت تکمیل خودکار آدرس با استفاده از Google Places.

• قوانین نمایش نقشه : نمایش یا پنهان کردن نقشه بر اساس روش حمل و نقل، مجموع هزینه سبد خرید، کد کوپن، سفارشات مهمان و موارد دیگر.

• نمایش نمای نقشه سفارشات : مشاهده آدرس سفارشات فعلی و گذشته روی نقشه توسط صاحبان فروشگاه و مشتریان کمک به صاحبان فروشگاه برای یافتن سریع آدرس مقصد (امکان مشاهده مکان سفارشات قبلی برای مشتریان)

• گردش کار حمل و نقل قدرتمند : تنظیم قیمت ارسال بر اساس موقعیت مکانی مشتری. روش‌های مختلف محاسبه هزینه ارسال مانند ارسال به تفکیک منطقه، ارسال بر اساس مسافت، ارسال بر اساس محدوده مسافت و ارسال بر اساس مکان فروشگاه.

• طرح‌های نقشه سفارشی : مطابقت طرح نقشه با قالب فروشگاه شما. ایجاد طرحی که تجربه کاربری را بهبود می‌بخشد.

• گوگل مپ سفارشی : سفارشی‌سازی کامل طرح‌بندی نقشه برای لذت بردن بیشتر مشتریان و ارتقای تجربه خرید.

• آیکون نشانگر سفارشی : استفاده از آیکون‌های دلخواه برای نشانگرهای نقشه.

• آدرس‌های ذخیره‌شده : عدم نیاز به وارد کردن مجدد آدرس توسط مشتریان در خریدهای بعدی. ذخیره‌سازی خودکار آدرس مشتریان.

• هزینه ارسال به تفکیک منطقه : ترسیم مناطق حمل و نقل با استفاده از نقشه گوگل. تنظیم نام منطقه و هزینه ارسال برای هر منطقه. به‌روزرسانی خودکار قیمت محصول با هزینه ارسال منطقه انتخابی مشتری.

• هزینه ارسال بر اساس مسافت : محاسبه خودکار هزینه‌های بیشتر برای مسافت‌های طولانی‌تر.

• هزینه ارسال بر اساس محدوده مسافت : تنظیم هزینه ارسال بر اساس محدوده‌های مسافتی خاص (مثلاً: 0 تا 10 کیلومتر = X تومان).

• هزینه ارسال بر اساس مکان فروشگاه : تعیین نرخ ثابت برای ارسال از هر فروشگاه. محاسبه هزینه ارسال نهایی بر اساس فروشگاه انتخابی مشتری در صفحه پرداخت.

• برون‌ریزی آدرس‌های سفارش : استخراج اطلاعات سفارشات مانند موقعیت مکانی مشتری، نام، شماره تلفن و موارد دیگر.

• محدود کردن تکمیل خودکار آدرس‌ها : بهبود تجربه پرداخت مشتریان با محدود کردن نتایج تکمیل خودکار آدرس.

• قوانین نمایش مختلف : نمایش یا پنهان کردن نقشه پرداخت بر اساس منطقه حمل و نقل و زیرمجموعه‌های سبد خرید.

• آدرس‌های دقیق مشتریان : انتخاب آدرس دقیق توسط مشتریان با استفاده از نقشه در صفحه پرداخت ووکامرس. نمایش آدرس انتخابی در صفحات سفارش مشتریان و صفحه سفارش مدیر فروشگاه.

• جزئیات سریع سفارش : دریافت جزئیات اصلی آدرس مربوط به یک سفارش بدون نیاز به رفتن به صفحه ویرایش سفارش. نمایش ستون‌ها بر اساس پیکربندی‌های انجام شده.

• گردش کار حمل و نقل : تنظیم دقیق قیمت تحویل محصولات. دریافت هزینه مشتریان بر اساس منطقه، فاصله یا مکان فروشگاه انتخاب شده.

• استفاده از کد کوتاه در صفحات : ایجاد نقشه‌های سفارشی با استفاده از تنظیمات از پیش پیکربندی شده. اضافه کردن کد کوتاه به هر پست یا صفحه‌ای که می‌خواهید.

 

استفاده از نقشه ثابت

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

دانلود نقشه برای استفاده Static و نمایش در افزونه MapSVG

اگر یک جستجوی ساده در گوگل داشته باشید، وب‌سایت‌های زیادی هستند که نقشه‌های SVG از مناطق مختلف را ارائه می‌دهند. اما بیشتر این نقشه‌ها فاقد جزئیات دقیق از نقشه هستند و بیشتر جنبه آموزشی دارند تا حرفه‌ای. اما برای دانلود یک نقشه حرفه‌ای با جزئیات بالا، می‌توانید از سرویس OpenStreetMap نقشه منطقه مورد نظرتان را با جزئیات دقیق و در اندازه دلخواه دانلود کنید. برای این منظور مراحل زیر را دنبال کنید :

1. ابتدا لوکیشن مورد نظر خود را تنظیم کنید. سپس با غلتک موس بزرگنمایی ندنظر خود را نیز تنظیم کنید.

2. در پنل کنترل نقشه OpenStreetMap، و با ابزار اشتراک گذاری Share ، کافی است از کادر Image بر روی دکمه Download کلیک کنید تا نقشه بدون نمایش ابزارها، با فرمت PNG دانلود شود. در این کادرفرمت تصویر بصورت پیشفرض بر روی PNG است و Scale بر اساس زوم شما تنظیم شده. بنابراین نیازی به تغییر این مقادیر نیست. اگر می‌خواهید قبل از دانلود نقشه، آن را Crop کنید، تیک گزینه "Set custom dimensions" را پر کنید تا ابزار Crop ظاهر شود. سپس منطقه مورد نظر خود را تنظیم کنید و بعد بر روی دکمه Download کلیک کنید.

نکات کاربردی

1. می‌توانید پس از دانلود نقشه با فرمت PNG آن را به فرمت Avif تبدیل کنید تا حجم بارگذاری را کاهش دهید. برای تبدیل فرمت تصاویر به فرمت Avif به آدرس https://fabconvert.com/convert/jpg/to/avif مراجعه کنید.

2. شما می‌توانید فرمت تصویر را بر روی SVG قرار دهید تا تصویر بصورت وکتور دانلود شود. اما بدلیل جزئیات زیاد نقشه، حجم فایل SVG به بالای 2 مگابایت میرسد که برای بارگذاری زنده در وب‌سایت، مناسب نیست.

 

افزودن نقشه در افزونه Revolution Slider

تقریباً همه طراحان وب‌سایت با افزونه قدرتمند Revolution Slider آشنایی دارند. این افزونه حرفه‌ای ترین افزونه ایجاد اسلایدر در وردپرس است و می‌توان گفت در 80 درصد طراحی‌ها از این اسلایدر استفاده شده است. یکی از ویژگی‌های این اسلایدر، استفاده از کد HTML به عنوان یک المان در اسلاید است. به این ترتیب شما هر نوع کد HTML که بخواهید را می‌توانید بدون محدودین درون اسلایدهای خود قرار دهید. با این ویژگی می‌توانید کد iframe نقشه‌ها و حتی ویدیوهای یوتیوب را به اسلایدر اضافه کنید تا از همان بدو ورود کاربر، اطلاعات تماس و نقشه شما نمایش داده شود.

1. برای این منظور ابتدا یک لایه دکمه "Button" اضافه کنید و در بین استایل‌های دکمه، حالت بدون استایل را انتخاب کنید.

2. سپس در بخش "Layer Options" ،  در گزینه "Content" و در کادر "Text/Button Layer Content" ،به جای محتوای متنی دکمه که عبارت "Click Here" در آن قرار دارد، کد HTML که از نقشه گوگل یا OpenStreetMap به دست آورده‌اید را وارد کنید.

 

سخن پایانی

نقشه بخشی از اطلاعات تماس را تشکیل می‌دهد و می‌تواند تا حد زیادی به وب‌سایت شما اعتبار ببخشد. علاوه بر این، گوگل به وب‌سایت‌هایی که از نقشه و آدرس معتبر استفاده کرده باشند، رتبه بالاتری در نتایج جستجو می‌دهد که این خود نیز بخشی از روند سئو را پیش می‌برد. بطور استاندارد هر وب‌سایتی همزمان باید کد اسکیما و افزونه سئو مناسب و همینطور نمایش نقشه را در خود جای داده باشد و این مورد یکی از موارد اولیه از اقدامات سئو است.