Responsive Harita Yapmak

Web siteniz de Google veya Bing haritaları Responsive (Esnek) yapabilmenin kolay bir yolunu arıyorsanız birazdan vereceğim CSS tekniğini kullanmak isteyebilirsiniz..

Görünen o ki bir çok geliştirici Google ve Bing haritalarını Responsive tasarımlara gömebilmek için yoğun bir çaba harcıyor. Bu uygulamayı çok kolay bir CSS tekniği ile çözebilirsiniz. Kodları aşağıda görebilirsiniz.

 

CSS

Aşağıdaki CSS kodunu sitenizine ekleyiniz

/* Flexible iFrame */

.Flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

Aşağıdaki HTML kodunu yerleştirmek istediğiniz sayfaya ekleyiniz.

<!-- Responsive iFrame -->
<div>
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Bern&amp;aq=&amp;sll=46.813187,8.22421&amp;sspn=3.379772,8.453979&amp;ie=UTF8&amp;hq=&amp;hnear=Bern&amp;t=m&amp;z=12&amp;ll=46.947922,7.444608&amp;output=embed&amp;iwloc=near"></iframe>
</div

Yukarıdaki Responsive iFrame “Div”i haritayı içine alan Div dir. İsterseniz bu Div’i başka Div’lerin içine ekleyebilirsiniz. Bundan sonra ekleyeceğiniz haritanın embed kodunu ekleyerek işlemi bitirebilirsiniz. Ayrıca bu kodlar herhangi embed kodu ile çalışabilir.