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

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

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