Google Haritalar Responsive Yapmak (Duyarlı Harita)

Merhabalar arkadaşlar bu yazımızda google maps iframe kodunu web sitelerimize eklediğimizde kullananlar olmuştur responsive yani duyarlı olarak çalışmamaktadır.Yani mobil sistemlerden girdiğimizde haritamız görünüyor fakat masaüstü boyutunda,buda görüntü kirliliğine ve yapımızı bozmaktadır.Çeşitli şekillerde responsive hale getirilebilen haritamızı biz css yardımıyla duyarlı hale getireceğiz.İsterseniz hemen başlayalım ve google haritalarını nasıl responsive olarak sitemize ekleyebileceğimizi öğrenelim.

Aşağıdaki Google Maps iframe kodu google tarafından verilen temiz hali.

<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>

Şimdi biz bu kodu div tagları arasında bir clas tanımlaması yapıp css üzerinden duyarlı kodlarımızla responsive hale getireceğiz.Aşağıdaki gibi div tagları arasında alıp kodu sitemize yerleştiriyoruz.

<div class="google-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>

Google harita kodumuzu yerleştirdiğimiz sayfanın bağlı olduğu herhangi bir css sayfasını en altına aşağıdaki css kodlarını ekliyoruz ve bitiriyoruz.İşlem bukadar.

.google-map{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.google-map iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}