زمان مطالعه: 16 دقیقه

نقشه گوگل و صفحه تماس با ما

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

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

خودمانیم… این کار صفحه پر کن خوبی هم هست. ما صفحه‌ی «تماس با ما» را درست می‌کنیم و در آن آدرس و شماره تلفن و نهایتاً آی‌دی شبکه‌های اجتماعی رو می‌گذاریم. الآن ما یک صفحه با اسم بزرگ تماس با ما داریم در حالی که اطلاعات آن صفحه به زور ۳-۲ خط شده است. نقشه‌های عریض و طویل حسابی به جان دادن این صفحه کمک می‌کنند.

آموزش استفاده از نقشه گوگل در سایت

این کار بسیار آسان است. آسان‌تر از آنچه که انتظارش را دارید. در ادامه مراحل کار را به صورت تصویری به شما نشان می‌دهم.

• مرحله‌ی اول: انتخاب مکان مورد نظر از روی گوگل مپ

وارد گوگل مپ شوید و نقطه‌ی مورد نظر خود را پیدا کنید. اگر مکان مورد نظرتان از قبل در گوگل مپ ثبت شده باشد، با جستجو هم قابل مشاهده است. در غیر این صورت باید به صورت دستی نقطه‌ی مورد نظرتان را پیدا و تارگت کنید. (دایره‌ی سمت راست)

بعد از پیدا کردن نقطه‌ی مورد نظر، روی گزینه‌ی Share کلیک کنید. (دایره‌ی سمت چپ)

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

در پنجره‌ای که باز می‌شود به تب Embed a map بروید.

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

بعد از این که به این تب آمدید، گزینه‌ی Copy HTML را بزنید. این قسمت را هم در دایره‌ی سمت راست و پایین‌تر در تصویر زیر برای شما مشخص کرده‌ام.

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

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

حالا که قطعه کد مورد نظر را کپی کرده‌اید به سایتتان برگردید. وردپرسی بودن یا نبودن سایت تأثیری در کلیت کار ما ندارد؛ ولی من ادامه‌ی اسکرین‌شات‌ها را روی وردپرس گرفته‌ام.

حالا به محل مورد نظرتان برای نمایش نقشه بروید. در صورت استفاده از ویرایشگر گوتنبرگ از بلوک «HTML سفارشی» استفاده کنید.

اگر از ویرایشگر کلاسیک وردپرس استفاده می‌کنید به تب «متن» بروید. من از ویرایشگر کلاسیک استفاده می‌کنم. پس اسکرین‌شات‌های بعدی هم روی این ویرایشگر است.

این بخش را هم در تصویر زیر برای شما مشخص کرده‌ام.

در صورت استفاده از صفحه‌سازها (مثل المنتور، ویژوآل کامپوزر، صفحه‌ساز پیش‌فرض خود قالب و…) حتماً از المان HTML استفاده کنید و این قطعه کد را درون این المان قرار دهید.

کار ما به صورت موقت در بخش «متن» تمام شده است. البته بعداً برای یک تغییر کوچک مجدداً به این قسمت برمی‌گردیم. چیزی تا پایان مراحل استفاده از نقشه گوگل در سایت باقی نمانده است.

در این مرحله از تب متن به تب دیداری می‌رویم تا حاصل کار را مشاهده کنیم. (تصویر زیر)

می‌بینیم که نقشه‌ی گوگل به درستی فراخوانی شده است و دقیقاً هم محل مورد نظر ما را نشان می‌دهد.

• مرحله‌ی چهارم: ویرایش ابعاد نقشه گوگل

همان‌طور که در تصویر قبل دیدید، نقشه‌ی گوگل تنها بخش کوچکی از عرض صفحه را گرفته بود و از این حیث چندان جالب نبود.

تغییر گزینه‌ی پیش‌فرض Medium هنگام کپی نقشه‌ی گوگل در ابتدای کار روی اندازه‌ی نمایش این نقشه تأثیر می‌گذاشت. اما آن موقع از این تغییر صرف‌نظر کردیم تا بعداً به شما کنترل دقیق‌تر روی ابعاد نمایش این نقشه را آموزش بدهم.

برای این کار به تب متن برمی‌گردیم. همان‌جایی که قطعه کد مربوط به نقشه را گذاشتیم. در بین این کد به دنبال عبارت

width=”??”

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

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

ساده‌تر بگویم: قرار دادن عدد ۱۰۰ خالی برای عرض یعنی ۱۰۰ پیکسل. بدون این که نیاز باشه جلوی صد علامت اختصاری px را بگذاریم.

ولی برای نشان دادن سایر مقیاس‌ها باید از علامت مخصوصشان استفاده کرد. من قصد دارم که نقشه‌ی سایتم تمام عرض صفحه را پوشش دهد. پس در بخش width عدد ۱۰۰ را به همراه نماد % قرار می‌دهیم. درست مطابق با شکل زیر.

به این ترتیب این نقشه تمام عرض صفحه را می‌گیرد.

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

وقتی می‌گوییم ۱۰۰٪ عرض، یا ۵۰٪ عرض مشخص است که درباره‌ی چه میزانی از اندازه صحبت می‌کنیم. چون عرض هر صفحه نمایشی مشخص است. اما ارتفاع اسکرول می‌خورد و هرگز تمام نمی‌شود. پس استفاده از درصد برای تعیین ارتفاع اشتباه است. ارتفاع را با پیکسل مشخص می‌کنیم و نیازی به گذاشتن px هم نیست.

• مرحله (پایانی) پنجم: انتشار نهایی و استفاده از نقشه گوگل در سایت

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

در این مرحله مجدداً به تب دیداری می‌رویم و نحوه‌ی نمایش نقشه را یک چک اولیه می‌کنیم. در صورتی که همه چیز درست بود صفحه را به روزرسانی می‌کنیم. کار تمام است. حاصل کار در بخش فرانت سایت به صورت زیر خواهد بود:

آموزش ویدیویی استفاده از نقشه گوگل در سایت

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

اضافه کردن Marker به نقشه‌ی گوگل

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

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

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

خب… حالا که این موضوع را فهمیدیم یک نکته‌ی جدید به شما می‌گویم. چیزی به اسم «شناسایی محل کسب‌وکار توسط گوگل» وجود ندارد. این لوکال گایدها هستند که محل‌های مختلف را روی نقشه‌ی گوگل ثبت می‌کنند.

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

استفاده از API گوگل مپ

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

گوگل این امکان را به شما می‌دهد که با دریافت API Key مخصوص گوگل مپ بتوانید به نقشه‌ای که در سایتتان گذاشته‌اید، نشانگر مکان (همان Marker) را اضافه کنید. حتی می‌توانید در یک فریم نقشه چند مارکر قرار دهید. این ویژگی برای کسب‌وکارهایی که چند شعبه یا چند دفتر کار دارند بسیار جذاب و کاربردی است.

برای دریافت API Key گوگل مپ به سایت mapsplatform.google.com مراجعه کنید. معمولاً نیاز است که برای دسترسی به این سایت از VPN یا سایت‌های تحریم‌شکنی نظیر شکن استفاده کنید.

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

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

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

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

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

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

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

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

استفاده از فریم گوگل مپ یا پلاگین‌های وردپرس؟

اگر مایلید که از این پلاگین‌ها استفاده کنید به صفحه‌ی پلاگین‌های گوگل مپ در مخزن وردپرس نگاهی بیاندازید. پلاگین MapPress Maps for WordPress جزو محبوب‌ترین‌های مخزن نیست؛ اما در این محبوب است و به نسبت زیاد استفاده می‌شود.

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

یکی از دلایل این کار کمک به سبک ماندن سایت است. پیشنهاد می‌کنم مطلب «تعداد پلاگین‌ها در سایت وردپرسی» را بخوانید تا بیشتر متوجه این دغدغه‌ی من شوید.

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

استفاده از المنت‌های گوگل مپ در صفحه‌سازها

اگر از صفحه‌سازهای وردپرس استفاده می‌کنید، احتمالاً صفحه‌ساز شما یک المنت مخصوص گوگل مپ هم دارد.

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

اگر هم صفحه‌ساز سایتتان المان نمایش نقشه نداشت، چیز زیادی را از دست نداده‌اید. به ابتدای این آموزش برگردید و از المان HTML برای قرار دادن فریم گوگل مپ در سایتتان استفاده کنید. برای نشان دادن رایگان مارکر هم مطلب اضافه کردن یک مکان به گوگل مپ را ببینید.

لود نشدن گوگل مپ

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

نمایش نقشه در سایت‌ها به خودی خودی مشکلی ندارد. از سمت ما هم فیلتر یا ممنوعیتی روی این مورد لحاظ نشده است. ولی بارها پیش آمده است که گوگل IPهای ایران را در لیست تحریمی خود قرار داده است. به این ترتیب نقشه‌ی گوگل در هیچ سایتی (چه سایت‌های ایرانی و چه سایت‌های خارجی) برای بازدیدکنندگان ایرانی دیگر باز نشده‌است.

در چنین شرایطی کاربر با چیزی شبیه به تصویر زیر روبرو می‌شود:

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

لود نشدن گوگل مپ و استفاده از تصویر به جای نقشه

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

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

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

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

در بخش قبلی متوجه شدیم که گاهی نقشه‌های گوگل در ایران لود نمی‌شوند. در این شرایط مشکل بزرگ این است که نقشه لود نمی‌شود و کاربر نقشه را نمی‌بیند. اما مشکل بزرگ‌تر، کند شدن شدید سایت است. سایت مدام برای فراخوانی نقشه ریکوئست می‌فرستد اما جوابی نمی‌گیرد و هی این کار را تکرار می‌کند. همین موضوع باعث افت شدید سرعت سایت می‌شود. استفاده از تصویر هم که کار خوبی بود؛ اما بهترین انتخاب ما نبود. پس چه کار کنیم؟

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

• سرویس قدرتمند Open Street Map

اوپن استریت مپ تا به حال سابقه‌ی تحریم ایران را نداشته است. پس گزینه‌ی قابل اعتمادی است. در عین ناباوری نقشه‌ی آن از گوگل مپ سبک‌تر است و به بارگزاری سریع‌تر سایت کمک می‌کند.

ویژگی فوق‌العاده جذاب‌ دیگر آن امکان قرار دادن مارکر بدون هیچ دردسری است. نه به اکانت لوکال گاید گوگل نیاز است، نه به پلاگین و نه هیچ چیز دیگری.

برای استفاده از این سرویس به openstreetmap.org بروید و مراحلی که در ادامه گفته‌ام را به ترتیب طی کنید. تصویر زیر نیز به درک بهتر شما از این مراحل کمک می‌کند.

مراحل استفاده از نقشه‌ی Open Street Map روی سایت:

1. محل مورد نظرتان را روی نقشه پیدا کنید.
2. روی آیکون Share کلیک کنید. این آیکون در تصویر بالا با رنگ سبز مشخص شده است.
3. گزینه Include marker را تیک بزنید تا نقطه‌ی مورد نظرتان در نقشه به کمک یک مارکر Pin شود.
4. سپس به تب HTML برید. (قسمت آبی پررنگ‌تر در تصویر بالا)
5. حالا کد پایین آن را کپی کنید.

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

اصلاح نسبی نقشه Open Street Map

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

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

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

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

در اینجا دیگر کار ما با نقشه‌ی Open Street Map تمام شده است. امیدوارم از این نقشه در سایتتان استفاده کنید.

نمونه‌ی استفاده شده از این نقشه در بستر وب را هم در صفحه تماس با من همین سایت ببینید.

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

آموزش ویدیویی استفاده از Open Street Map در سایت

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

 

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

انتخاب بعدی شما سرویس نقشه‌ی نشان است. من کماکان سرویس Open Street Map را ترجیح می‌دهم؛ اما سرویس نقشه‌ی نشان هم واقعاً خوب است و ارزش امتحان کردن را دارد.

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

استفاده از نقشه نشان کمی پیچیده‌تر از نقشه‌های گوگل و اوپن استریت مپ است؛ اما درنهایت کار سختی نیست و با صرف زمان بسیار کوتاهی قابل راه‌اندازی است.

آیکون‌های مسیریابی گوگل مپ و ویز در سایت

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

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

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

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

برای این کار به ۲ آیکون و ۲ لینک احتیاج دارید. همین. در ادامه بیشتر توضیح می‌دهم. با من؛ میثم عربی همراه باشید.

مسیریابی در گوگل مپ

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

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

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

در این مرحله کارتان با گوگل مپ تمام است. به سایتتان و جایی که می‌خواهید آیکون مسیریابی با گوگل مپ را بگذارید، برگردید.

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

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

مسیریابی در ویز

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

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

روی دکمه‌ی ارسال کلیک کنید (دایره زرد رنگ سمت راست تصویر).

بعد از انجام این کار یک پنجره در پایین صفحه برایتان ظاهر می‌شود (سمت چپ تصویر بالا). در این مرحله روی دکمه‌ی «کپی لینک» کلیک کنید (دایره زرد رنگ سمت چپ تصویر بالا).

کارتان با اپلیکیشن ویز تمام است. می‌توانید برنامه را کاملاً ببندید. ادامه‌ی کار هم مثل گوگل مپ است.

به سایتتان برگردید. آیکون مسیریابی با ویز را آپلود کنید و لینکی که در مرحله‌ی قبل کپی کردید را به آن لینک کنید.

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

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

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

پیش‌نمایش این آیکون‌ها را در تصویر زیر ببینید:

این آیکون‌ها در ۲ فرمت PNG و AI هستند.

فرمت AI قابل ویرایش در ایلاستریتور است. به راحتی می‌توانید رنگ‌بندی و جزییات آن را مطابق میلتان تغییر دهید.

فرمت PNG باکیفیت هم برای استفاده‌ی مستقیم و بدون دردسر در سایت است.

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

سؤالات پرتکرار درج نقشه در سایت

در صورتی که ابهام یا سؤالی دارید، کامنت بذارید و بپرسید. خیلی سریع بهتون جواب میدم و بعد بهتون ایمیل می‌زنم و اطلاع میدم که جواب رو چک کنید.