5.00 / 1 oy

Responsive Google maps iframe harita nasıl yapılır?

Google maps iframe'lerde genişlik ve yükseklik html elementleri üzerinden verildiği için tüm cihazlarda aynı boyutlar ile görütüleniyor. Cihazın ekran boyutuna göre %100'ü geçemeyecek responsive iframe google maps kodu kullanan varsa paylaşabilir mi?

dağhan

28.07.2019 03:05

Bu soru 1 kez yanıtlandı.

  • 28 Temmuz 2019 10:48
    33

    IFrame google maps haritasını tüm cihaz boyurlarının ekranlarında %100 uzunlukta otomatik olarak ölçekleyen bir responsive tasarım için, iframe'inizi bir div içine koyun ve bu div'e harita class'ı vererek aşağıdaki css kodunu sayfanıza eklemeniz yeterli.

     .harita {
            position: relative;
            padding-bottom: 75%;
            height: 0;
            overflow: hidden;
        }
        .harita iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }

    HTML yapısı da şu şekilde olmalı (iframe direk kopyala yapıştır yapıldı)

    <div class="harita">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d48167.19253027008!2d28.712432173586024!3d41.0154201136153!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14caa6c7af9b80dd%3A0xbf7ef8fe104affb1!2zS8O8w6fDvGvDp2VrbWVjZSBHw7Zsw7w!5e0!3m2!1str!2str!4v1564262754011!5m2!1str!2str" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>

     

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
Responsive Google maps iframe harita nasıl yapılır?

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.