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

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

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

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

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

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

• درج تبلیغات در میان متن نوشته ها با Insert Post Ads

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

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

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

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

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

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

• ایجاد نقشه وب سایت با Slick Sitemap

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

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

• انتخاب بهترین ساختار پیوند یکتا در وردپرس

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

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

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

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

فقط دوستان عزیز هر گونه مشکلی داشتید در قسمت پرسش و پاسخ سایت 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.

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

صفحه افزونه