اکثر سایت‌ها با اضافه کردن نقشه به صفحه درباره ما این امکان را به کاربران خود می دهند تا به‌راحتی بتوانند مکان کسب‌وکار آنها را پیدا کنند. شما با درج آدرس دقیق و مکان جغرافیایی شما در نقشه ، می‌توانید ارتباط خود را با کاربران تقویت کنید. انتخاب یک سرویس با رابط کاربری آسان و قابل‌فهم به شما کمک می‌کند تا قابلیت و کاربردهای متنوعی را به نقشه خود اضافه کنید. البته یک سرویس ایرانی سرعت بهتری برای آپلود نقشه شما دارد همچنین کابران راحت تر میتوانند نقشه را ببینند. درمقاله چگونه در وب سایت از نقشه آنلاین استفاده کنیم به معرفی ۹ سرویس نقشه آنلاین پرداختیم در این مقاله سعی کردیم با استفاده از سرویس نقشه نشان موقعیت سایت را در یک نقشه با افزودن قابلیت‌های کاربردی به شما آموزش دهیم.
مزایا ثبت مکان کسب و کار به نقشه
ثبت مکان شما در نقشه معتبر بودن کسب‌وکار را به مخاطبان نشان می‌دهد و اعتماد بسیاری را برای شما بدست می‌آورد. اضافه کردن نقشه به صفحه درباره ما باعث می شود مشتریان به سمت شما می‌آیند و به‌راحتی شمارا در نقشه پیدا می‌کنند. شما می‌توانید با اضافه کردن قابلیت مسیریابی ، فضای بهتری برای کاربران در نقشه مهیا کنید. در حقیقت تبلیغات مکان محور به میزان ۸۰% خطای جستجو را کاهش می‌دهد و می‌تواند در سئو شما تأثیر بسزایی بگذارد. پیدا شدن مکان شما در نتایج جستجو ، بازدیدهای سایت را افزایش می‌دهد و رتبه بهتری به شما تعلق می‌گیرد.
معرفی نقشه نشان
نشان به‌عنوان یک سرویس نقشه فارسی در حال حاضر تنها ارائه‌دهنده نقشه بر اساس ترافیک آنلاین خیابان‌ها در ایران هست. شما می‌توانید با API نقشه نشان به‌عنوان نقشه پایه و تایل های این سرویس دقیق‌ترین و بروزترین نقشه را برای سایت خود داشته باشید. البته نشان امکان به‌روزرسانی سه روز یک‌بار را به شما می‌دهد تا به صفحات جدید شما نقشه اضافه شود.
چگونه API نقشه خود را دریافت کنیم
شما می‌توانید برای دسترسی به سرویس‌های نقشه با ایجاد یک اکانت در سرویس موردنظر خود اقدام به دریافت API خود کنید. مثلاً در سایت نشان با ثبت‌نام ( با اکانت گوگل یا فیس‌بوک ) و شماره همراه خود را در اطلاعات کاربری اضافه کنید و ثبت‌نام خود را تکمیل کنید سپس در کلید دسترسی خود دامنه و IP که اجازه دسترسی دارند را وارد کنید. اکنون شما عرض در ۱ دقیقه می‌توانید آن را در Header کد سایت قرار دهید و با افزودن کتابخانه‌هایی نقشه خود را ارتقا دهید.
اگر شما API ( نقشه پایه ) خود را در Header قرار ندهید با Error401 یا خطای Unauthorized مواجه می‌شوید و نقشه به‌طور کامل نمایش داده نمی‌شود. درواقع تایل های نقشه شما ناقص خواهد شد.
سرویس تایل نقشه
تایل (به معنی کاشی) همان مربع‌های کوچکی است که نقشه را با تقسیمات بیشتری به ما نشان می‌دهد. تایل نقشه در دو نوع استاندارد Raster و Vectorقابل‌دسترسی است. تصاویر وکتور (Vector) برداری‌اند و کیفیت خود را از دست نمی‌دهند ، البته خروجی آنها PDF است. همچنین به سبک Street برای نمایش رنگی عارضه‌ها بر روی نقشه و Gray برای نمایش رنگ ملایم و روشن استفاده می‌شود. تصاویر Raster پیکسلی‌اند ، شماتیک نقشه و تصاویر ماهواره‌ای زمین را به‌صورت jpg و فرمت‌های دیگر تصویر خروجی می‌دهد که مخصوص فایل‌های بزرگ‌تر هست.
SDK نقشه وب
برای نمایش نقشه داینامیک ( پویا ) در وب‌سایت یا اپلیکیشن اندروید وIos نیاز به یک کیت توسعه SDK دارید تا بتوانید نقشه خود را بر اساس نقشه پایه API ایجاد کنید. درواقع SDK به برنامه‌نویس اجازه می‌دهد و ابزاری در اختیارش می‌گذارد تا در یک سرویس نقشه به ایجاد لوکیشن در نقشه بپردازد. یک SDK شامل کدهای جاوا اسکریپت که با متدهای مشخص و استانداردی توسعه‌یافته ، امکان ایجاد آیتم‌های مارکر ، خط ، دایره و غیره را به نقشه در نظر گرفته‌شده است. شما در کلاس مپ یک Instance ایجاد می‌کنید و قابلیت‌هایی را به نقشه خود اضافه می‌کنید. SDK نقشه نشان بر پایه کتابخانه‌های Openlayers 5.3.0 و leaflet 1.4.0 پیاده‌سازی شده است که شما می‌توانید کتابخانه‌های خودتان را نیز به آن اضافه کنید.
سرویس‌های نقشه
بهتر است برای ثبت لوکیشن خود با سرویس نقشه آشنا شوید تا نقشه بهتری برای وب یا اپلیکیشن خود بسیازید. سرویس‌های Routes امکان فاصله‌یابی و مسیریابی ، در نظر گرفتن ترافیک ، تخمین زمان رسیدن ، ورود به طرح ( زوج ، فرد و ترافیک ) برای نقشه شما فراهم می‌کند. همچنین می توانید رویدادهای مسیر مثل تصادف ، پلیس را برای مسیر پیشنهادی دریافت کنید و در سرویس‌های Geocoding جستجو و تبدیل موقعیت به آدرس با API شما فراهم می‌شود.
راه‌اندازی نقشه
مرحله اول شما تهیه یک API که راجبش صحبت کردیم و گفتیم آن را در قسمت Header سایت قرار می‌دهیم. در مرحله بعدی شما باید سه فایل اصلی کتابخانه البته آخرین نسخه OpenLayers را قرار دهید و یا هر کتابخانه دیگری از این سرویس را قرار دهید. فایل اصلی map.min.js خود را بعد از ol.js قرار دهید ( به‌صورت آنلاین قرار دهید)
<link rel="stylesheet" type="text/css" href="https://static.neshan.org/api/web/v1/openlayers/v4.6.5.css"> <script> src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script type="text/javascript" src="https://static.neshan.org/api/web/v1/openlayers/v4.6.5.js"></script> با افزودن یک div با id مشخص در صفحه و ایجاد یک instance جدید یک خط یا مربع ایجاد کنید. همچنین با set map type چهار نوع سبک نقشه را برای خود ایجاد کنید. سبک‌ها شامل:
- Dreamy
- Dreamy-gold
- Neshan
- Standard-day
- Standard-night
- Osm-bright
به‌عنوان مثال ما سبک standard-day را در کلاس myMap فراخوانی کردیم.
;(myMap.setMapType("standard-night" در صورتی که بخواهیم از leaflet کتابخانه اضافه کنیم سه فایل اصلی زیر را به آن اضافه می‌کنیم. بازهم یادآور می‌شویم که فایل‌ها نباید به‌صورت آفلاین قرار بگیرند.
<link href="https://static.neshan.org/sdk/openlayers/5.3.0/ol.css"" rel="stylesheet" type="text/css"> <script> src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://static.neshan.org/sdk/openlayers/5.3.0/ol.js" type="text/javascript"></script> با درج کد زیر نقشه بالاخره در سایت شما به نمایش درمی‌آید.
var myMap = new ol.Map({ target: ‘MAP_ELEMNT_ID’, key: ‘YOUR_API_KEY’, view: new ol.View({ center: ol.proj.fromLonLat([51.338076,35.699756]), zoom: 17 )} ;)} myMap.setMapType('bright'); شما می‌توانید با کتابخانه‌های زیر یا سرچ کتابخانه‌های دیگر از نقشه خود را ارتقا دهید
- Leaflet v1.4.0 reference
- Leaflet tutorials
- Openlayers v5.3.0 documentation
- Openlayers v5.3.0 examples
جمع بندی
شما می‌توانید افزونه وردپرس نقشه نشان به وردپرس خود اضافه کنید ، فقط نیاز است اول به سایت نشان بروید و یک اکانت ایجاد کنید و API اختصاصی خودتان را دریافت کنین تا بتوانید با اضافه کردن این افزونه ، مدیریت سایت خود را در دست داشته باشید. مطمئناً نقشه‌ای که شما به سایت اضافه می‌کنید ، یک امتیاز برای طراحی سایت و سئو شما محسوب می شود. پس بهتراست دست بکار شوید و به ثبت لوکیشن سایت درنقشه با یک رابط کاربری خوب بپردازید.
