logo

 

اکسیژن طراحی سایت Msina

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

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

بروزرسانی در تاریخ ۲۰ اسفند ۱۳۹۸

بروزرسانی در تاریخ ۱۹ خرداد ۱۳۹۷

بروزرسانی در تاریخ ۳۰ بهمن ۱۳۹۶

 

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

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

 

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

 

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

 

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

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

 

 

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

 

25 نظرات
  • Posted at 1:19 ب.ظ, اردیبهشت 21, 1399

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

  • Posted at 10:38 ق.ظ, اردیبهشت 21, 1399

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

  • Posted at 4:08 ق.ظ, فروردین 18, 1399

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

  • Posted at 2:12 ب.ظ, اسفند 19, 1398

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

  • hassan
    پاسخ
    Posted at 11:53 ق.ظ, اسفند 19, 1398

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

  • Posted at 11:56 ق.ظ, دی 22, 1398

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

  • مبینا
    پاسخ
    Posted at 5:52 ق.ظ, آبان 13, 1398

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

  • شایان
    پاسخ
    Posted at 7:31 ق.ظ, تیر 29, 1398

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

  • سایت فندک
    پاسخ
    Posted at 2:52 ب.ظ, شهریور 20, 1397

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

  • محمدحسن
    پاسخ
    Posted at 4:00 ق.ظ, خرداد 23, 1397

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

  • افراسیابی
    پاسخ
    Posted at 8:08 ب.ظ, خرداد 19, 1397

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

  • رضا
    پاسخ
    Posted at 8:07 ب.ظ, خرداد 19, 1397

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

  • Posted at 3:34 ب.ظ, خرداد 19, 1397

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

  • زهرا محمدپور
    پاسخ
    Posted at 9:54 ق.ظ, فروردین 26, 1396

    عالی بود

  • لطفی
    پاسخ
    Posted at 12:43 ب.ظ, آبان 19, 1395

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

ارسال نظر

نظر
نام
ایمیل
وب سایت

Time limit is exhausted. Please reload CAPTCHA.