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

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

آموزش

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

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

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

 

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

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

 

سپس در کادر باز شده بر روی گزینه 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;
}

 

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

پسورد فایل ivahid.com
امتیاز شما در رابطه با این مقاله ؟
بدبدمعمولیخوبخیلی عالی
18 رای, 4,17 از 5
Loading...

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

مشاهده مقاله من : درگاه های واسط پرداخت و مزایا نسبت به PSP

دیدگاه شما عزیزان

  • مهدی
    25 دی 1400

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

    • وحید دانافرد
      2 اردیبهشت 1401

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

  • محمد
    29 دی 1399

    خیییلی حال کردم آقا دمت گرم به این راحتی واقعا فکر نمیکردم.

  • مهرداد
    14 مهر 1399

    سلام
    واقعا خوب و مفید
    خیلی ممنونم

    • محسن رضایی
      15 مهر 1399

      سلام و عرض ادب
      سپاس بابت اشتراک نظرتان
      همیشه شاد و موفق باشید🌹🙏

  • میلاد
    25 شهریور 1399

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

    • محسن رضایی
      26 شهریور 1399

      سلام و عرض ادب
      دوست عزیز باید کد زیر را از طریق api اضافه کنید
      map.fitBounds(bounds);
      var listener = google.maps.event.addListener(map, “idle”, function() {
      if (map.getZoom() > 16) map.setZoom(16);
      google.maps.event.removeListener(listener);
      });

  • matin
    26 مرداد 1399

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

  • علیرضا
    28 تیر 1399

    آموزشی عالی و مفید و کاربردی و در عین حال ساده بود. سپاس فراوان.

    • محسن رضایی
      11 مرداد 1399

      سلام و عرض ادب
      تشکر بابت ارسال نظرتان.
      شاد و موفق باشید

  • علی
    4 تیر 1399

    عالی بود ممنون در وقتم صرفه جویی کردیید.

    • وحید دانافرد
      4 تیر 1399

      سلام
      خوشحالیم که مفید واقع شده .
      سپاس از اشتراک نظر مفید و انرژی بخشتان . ??
      شاد باشید

کادر ارسال دیدگاه شما کاربر عزیز

2842 442121
پکیج برنامه نویس واقعی