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

Bu soru 2 kez yanıtlandı.

• bill gates

  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>

   

• bora34

  24 Nisan 2022 03:14

  0

  bkz: iframe Youtube videosu tam ekran olmuyor