ویجت نقشه گوگل (Google Maps) در المنتور

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

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

امکانات اصلی المان نقشه گوگل در المنتور

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

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

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

محتوا در ویجت نقشه گوگل المنتور

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

گزینه نقشه گوگل درالمان Google Maps المنتور

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

تنظیمات این بخش در ویجت نقشه گوگل المنتور

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

بخش استایل ویجت Google Maps در المنتور

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

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

گزینه فیلترهای CSS در ویجت نقشه گوگل المنتور

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

بخش پیشرفته در المان نقشه گوگل المنتور

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

طرح‌ بندی در ویجت Google Maps المنتور

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

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

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

بخش تبدیل در ویجت نقشه گوگل المنتور

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

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

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

تنظیمات حاشیه ویجت Google Maps در المنتور

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

ماسک در نقشه گوگل المنتور

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

گزینه واکنش‌ گرا ویجت Google Maps در المنتور

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

بخش ویژگی ها در ویجت نقشه گوگل 

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

بخشcss سفارشی در Google Maps المنتور

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

پیشنهاد مطالعه: آموزش کامل المان ویدئو در المنتور و کاربردهای آن

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

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

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

پیشنهاد مطالعه: آموزش کامل بخش کانتینر در المنتور

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

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

نکته نهایی

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