آموزش قرار دادن نقشه گوگل به صورت ریسپانسیو در هر سایت
آموزشبا سلام خدمت شما کاربران گرامی . امروز آموزش قرار دادن نقشه گوگل به صورت ریسپانسیو در سایت های مختلف را برای شما آماده کردیم . امیدواریم که از این آموزش استفاده کافی رو ببرید . در مطالب قبلی آموزش قرار دادن نقشه گوگل را با استفاده از افزونه برای شما عزیزان توضیح داده ایم . در این مطلب برای عزیزانی که نمیخواهند از افزونه استفاده کنند طریقه کار با کد 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;
}
امیدوارم که از این آموزش استفاده کافی برده باشید . خوشحال میشویم تا نظرتان را درباره این آموزش بشنویم . پس هر چه سریعتر دست به کار شده و نظر خود را در پایین همین مطلب برای ما ارسال کنید .
سلام خسته نباشید
معذرت میخوام این کدها رو تو کدوم قسمت وردپرس باید زد.
در بخش موارد بیشتر؟
سلام و عرض ادب
کد دریافت شده از گوگل را نیاز است در یک پست و یا برگه با استفاده از ابزار های موجود در وردپرس ( گوتنبرگ ) قرار دهید.
در آپدیت این پست بیشتر به این موضوع خواهیم پرداخت ، سپاس از نظر شما.
شاد و موفق باشید
خیییلی حال کردم آقا دمت گرم به این راحتی واقعا فکر نمیکردم.
سلام
واقعا خوب و مفید
خیلی ممنونم
سلام و عرض ادب
سپاس بابت اشتراک نظرتان
همیشه شاد و موفق باشید🌹🙏
عاااااالی بود خسته نباشید.
فقط زوم نقشه رو چجوری میشه تعیین کرد؟ یعنی نقشه بطور پیشفرض با زوم دلخواه نمایش داده بشه در سایت..
سلام و عرض ادب
دوست عزیز باید کد زیر را از طریق 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);
});
عالی بود، کوتاه و روان و قابل فهم
ممنون از شما
آموزشی عالی و مفید و کاربردی و در عین حال ساده بود. سپاس فراوان.
سلام و عرض ادب
تشکر بابت ارسال نظرتان.
شاد و موفق باشید
عالی بود ممنون در وقتم صرفه جویی کردیید.
سلام
خوشحالیم که مفید واقع شده .
سپاس از اشتراک نظر مفید و انرژی بخشتان . ??
شاد باشید