ارومیه، پاساژ فیلیپس
044-32234187
09120162336
ارومیه، پاساژ فیلیپس
جستجو

قرار دادن نقشه محل مورد نظر در وب سایت

قرار دادن نقشه محل مورد نظر در وب سایت

بروزرسانی در تاریخ 6 آذر 1400

 

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

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

 

نحوه قرار دادن نقشه محل مورد نظر در وب سایت

 

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

 

نحوه قرار دادن نقشه محل مورد نظر در وب سایت
نحوه قرار دادن نقشه محل مورد نظر در وب سایت

 

 

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

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

 

Google-Maps-Msina

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

 

خوب در مرحله اول ابتدا میریم به سایت http://maps.google.com گوکل مپ! بله این سایته! و منطقه ی جغرافیایی خود را پیدا کنید مناطق معروف را می توانید search کنید!

یعنی برای مثال ارومیه تبریز زنجان ! خخخخخ رفتیم به سمت آذربایجان خوب یکم بریم سمت شمال رشت و مازنداران نه بسه یکم دیگه بریم سمت جنوب کرمان جیرفت شیراز و اصفهان و… همه ایران سرای من است. خ!اگر منطقه ی خود را در گوگل مپ ندارید می توانید خودتان آن را درست کنید.

برای این کار روی نقشه منطقه را پیدا کنید و دقیقا روی منطقه ی مورد نظر کلیک راست کنید و گزینه ی whats here? یا direction to here رو بزنید , بعد یه علامتی برای اون منطقه قرار داده میشه روی اون علامت کلیک کنید در سمت چپ صفحه می توانید برای منطقه ی خودتون نام و توضیح بنویسید و برای گوگل ارسال کنید.

 

 

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

 

googlemaps-embed-iframe

 

در این کادر ظاهر شده دو تا کد به شما میده یکی لینک منطقه هستش و یکی هم کد iframe شما برای قرار دادن نقشه ی گوگل در بین کدهای سایتتون باید از کد iframe یعنی کد دوم استفاده کنید که به صورت پیش فرض عرض و طولی براش در نظر گرفته شده برای سفارشی سازی می تونید روی متن زیرش Customize and preview embedded map کلیک کنید و در صفحه ای که ظاهر میشه نحوه ی نمایش رو شخصی سازی کنید.

 

 

اگر آدرس را ( مکان جست و جو ) نگاه کنید می بینید که منطقه ی شما با چه نامی قابل جست و جو هستش. این مورد رو یادتون باشه در ادامه لازم داریم.

 

برای سایت های وردپرسی WordPress

 

و اما برای سایت های وردپرسی چیکار کنیم؟ از روش بالا میتوان استفاده کرد ولی  همچنین برای راحتی کار می تونید از افزونه های وردپرس هم استفاده کنید. برای این کار ابتدا افزونه یا همون پلاگین Google Maps Widget را از سایت Msina در پایین همین پست دانلود کرده و سپس نصب و فعال سازی کنید.

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

 

google-maps-widget-settings

 

فقط دوستان عزیز هر گونه مشکلی داشتید در قسمت پرسش و پاسخ سایت https://www.msina.ir/ask قرار دهید تا در اسرع وقت پاسخ داده شود با تشکر گروه اکسیژن طراحی سایت Msina.

 

نحوه قرار دادن نقشه گوگل به صورت واکنشگرا در تمام سایت‌ها

 

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

 

تغییر پیوند یکتا در وردپرس بدون خطا با Change Permalink Helper

 

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

 

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

 

اکنون باید یک تگ div برای ریسپانسیو کردن نقشه اضافه کنید. کد شبیه زیر خواهد شد.

 

<div class="map-responsive"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div>

 

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

 

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

 

فقط دوستان عزیز هر گونه مشکلی داشتید در قسمت پرسش و پاسخ سایت https://www.msina.ir/ask قرار دهید تا در اسرع وقت پاسخ داده شود با تشکر Msina.

 

دانلود افزونه

صفحه افزونه

Mir Sina
Mir Sina
www.msina.ir

دانشجو دکتری تخصصی دانشگاه تبریز، کارشناسی ارشد دانشگاه تهران

نوشته های مرتبط
27 دیدگاه
shahnam jahanbakhsh

سلام خدمت ادمین محترم وقتتون بخیر.
خیلی آموزش خوب و قابل فهمی بود ممنونم ازتون، فقط من از سایت w3schools که خوندم یه چیزای دیگه میگفت که من هیچی نفهمیدم:) برا همین میخواستم ببینم اون آموزش دقیقا چه تفاوتی با آموزش شما داره؟ امکانش هست اونم توضیح بدین مخصوصا بخش overlays رو.

با سلام
چشم حتما به زودی در قالب یک مطلب آموزشی قرار خواهد گرفت

مثل همیشه عالیییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییی

عالی مثل همیشه

فوق العاده کاربردی ممنونم

خواهش میکنم موفق باشید

سلام ام سینا
نحوه ی قرار دادن نقشه گوگل در سایت های وردپرسی چطوریه؟ میشه کامل توضیح بدید؟
سپاس

hassan

سلام
الان من نقشه رو داخل سایتم گذاشتم ولی اون مکانی که انتخاب کردم با اون علامت قرمز رنگ نشون داده نشده
چجوری اون نشان قرمز رنگ رو بیارم ؟

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

موفق باشید
با احترام

مبینا

سلام با این روش فقط یک لوکیشن رو میتونیم روی نقشه مشخص کنیم؟اگر بیشتر میشه میتونید راهنمایی کنید …؟من میخوام شعبه های مختلف روی نقشه دیده بشه…ایا لازمه واسه هر شعبه یک نقشه جدا گرفته بشه…؟

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

شایان

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

با سلام
نمایش نقشه گوگل در وردپرس بدون استفاده از افزونه:
برای این کار ابتدا لازم است که کد HTML نقشه را برای محل مورد نظر بیابیم. برای دریافت این کد ابتدا به سایت Google Maps مراجعه نمایید. سپس آدرس محل مورد نظر را وارد کنید تا محل مورد نظر با یک مارکر بر روی نقشه به نمایش در بیاید. حالا در سمت چپ صفحه روی دکمه ی SHARE کلیک کنید.

پس از کلیک روی دکمه ی SHARE یک پاپ آپ روی صفحه برای شما باز میشود. در این پاپ آپ به تب Embed a map مراجعه کنید. (مانند تصویر بالا) در اینجا کد نمایش محلی که روی نقشه مشخص کرده بودید برای شما به نمایش در آمده و شما میتوانید با کلیک روی COPY HTML آن را کپی کنید.
اگر دقت کنید در سمت چپ این کد عبارت medium درج شده که نشانگر اندازه ی نقشه در سایت شماست. شما میتوانید این مقدار را تغییر داده و در صورت نیاز به صورت دستی مقدار خاصی را برای ابعاد نقشه وارد کنید.

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

سایت فندک

عالی بود
خیلی کامل توضیح دادید
پایدار باشید

محمدحسن

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

با سلام
کاربر عزیز این افزونه در سایت معرفی و برای دانلود در سایت قرار گرفته است
از لینک https://www.msina.ir/slick-sitemap میتونید دسترسی پیدا کنید
با احترام

افراسیابی

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

با سلام
بله می شود با کد نویسی اختصاصی، البته اگر بخواهید میتونید سفارش دهید براتون کد نویسی کنیم
با احترام

رضا

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

باسلام،
میشه باید آشنایی به کدنویسی داشته باشید

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

موفق و پایدار باشید

زهرا محمدپور

عالی بود

موفق باشید

لطفی

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

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

یک پاسخ بنویسید

نشانی ایمیل شما منتشر نخواهد شد.