آموزش اضافه کردن نقشه به صفحه درباره ما

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

در این مقاله می خوانیم:

• مزایا ثبت مکان کسب و کار به نقشه
• معرفی نقشه نشان
• چگونه API نقشه خود را دریافت کنیم
• سرویس تایل نقشه
• SDK نقشه وب
• سرویس ‌های نقشه
• راه ‌اندازی نقشه

مزایا ثبت مکان کسب و کار به نقشه

ثبت مکان در نقشه، معتبر بودن کسب و کار شما را به مخاطبان نشان می ‌دهد و اعتماد بسیاری را برای شما فراهم می آورد. اضافه کردن نقشه به صفحه درباره ما باعث می شود تا مشتریان به سمت شما بیایند و به ‌راحتی شما را در نقشه پیدا کنند. شما می توانید با اضافه کردن قابلیت مسیریابی، فضای بهتری را برای کاربران در نقشه ایجاد ‌کنید. در حقیقت، تبلیغات مکان محور به میزان 80% خطای جستجو را کاهش می‌ دهد و می تواند در سئو شما تأثیر خوبی بگذارد. پیدا شدن مکان شما در نتایج جستجو، بازدیدهای وب سایت را افزایش می ‌دهد و رتبه بهتری به شما تعلق می ‌گیرد.

معرفی نقشه نشان

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

چگونه API نقشه خود را دریافت کنیم

شما می ‌توانید برای دسترسی به سرویس‌ های نقشه با ایجاد یک اکانت در سرویس مورد نظر خود اقدام به دریافت API کنید. به عنوان مثال می توانید در وب سایت نشان با ثبت نام (اکانت گوگل یا فیس بوک) و اضافه کردن شماره همراه در اطلاعات کاربری، ثبت نام خود را تکمیل کنید سپس در کلید دسترسی خود، دامنه و IP که اجازه دسترسی دارد را وارد کنید. اکنون در عرض 1 دقیقه می توانید آن را در 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 اختصاصی خودتان را دریافت کنید تا بتوانید با اضافه کردن این افزونه، مدیریت وب سایت خود را در دست داشته باشید. نقشه ای که شما به وب سایت خود اضافه می کنید یک امتیاز برای طراحی وب سایت و سئو شما محسوب می شود پس بهتراست دست به کار شوید و به ثبت لوکیشن وب سایت خود درنقشه با یک رابط کاربری خوب بپردازید.