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

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

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

آموزش

با سلام خدمت شما کاربران گرامی . امروز آموزش قرار دادن نقشه گوگل به صورت ریسپانسیو در سایت های مختلف را برای شما آماده کردیم . امیدواریم که از این آموزش استفاده کافی رو ببرید . در مطالب قبلی آموزش قرار دادن نقشه گوگل را با استفاده از افزونه برای شما عزیزان توضیح داده ایم . در این مطلب برای عزیزانی که نمیخواهند از افزونه استفاده کنند طریقه کار با کد 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
امتیاز شما در رابطه با این مقاله ؟
بدبدمعمولیخوبخیلی عالی
14 رای, 3٫93 از 5
Loading...

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

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

دیدگاه شما عزیزان
  • علی
    4 تیر 1399

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

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

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

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

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

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

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

  • matin
    26 مرداد 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);
      });

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

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

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

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

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

iwmf