Google Haritalar Kodunu Responsive (Duyarlı) Yapmak

Web Sitelerine Google Haritalar Yerleştirme Kodunu Nasıl Responsive (Duyarlı) Ekleriz?

Özellikle kurumsal internet sitelerinde işletmenin yerini belirtmek istediğimizde Google haritalar servisini kullanılmaktadır.

Google haritaların verdiği yerleştirme kodunu en boy olarak düzenleyebiliriz ancak günümüzde mobil erişimin yaygınlaşması ile duyarlı yapıların kullanılması da bir zorunluluk oldu. Google haritalar kodunu nasıl duyarlı hale getirebiliriz beraber bakalım.

<style>
.google-maps {
position: relative;
padding-bottom: 75%; // Haritanın en-boy oranı.
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>
<div class="google-maps">
Google Harita Yerleştirme Kodu
</div>

HTML / JAVASCRIPT EKLEMEK

Tema içinde kullanmak için :

Blogger > Tema > HTML'yi Düzenle > "ilgili bölüm"

Widget (gadget) olarak eklemek için :

Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :

Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

* Canlı Demo için :

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

Kod editörünü kullanabilirsiniz.