Özellikle kurumsal Web siteler adres ve konumlarını harita üzerinde göstermektedir. Ancak harita üzerinde konumunuzu işaretledikten sonra Google Maps’ın sieze verdiği kod iframe şeklindedir ve içerisinde bulunan width=”600″ height=”450″ kodları üzerinde değişiklik yaparak boyutunu ayarlayabiliyorduk, ancak responsive yani duyarlı bir web sitesine sahipseniz bu sabit değerler sizin için sıkıntı oluşturacaktır. Web sitenizin her cihaza uygun şekil alması gibi harita konumunuzun da cihaza göre şekil almasını istersiniz. Sözü daha fazla uzatmadan işin kod kısmına geçelim.

Responsive Google Haritalar Konum Yapma

Stil Kodları;

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // Burası en-boy oranıdır.
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

İçerik Kodları;

<div class="google-maps">
   <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6020.352479441252!2d29.002748147384676!3d41.02140003253965!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6ed7f4baceb4476c!2sK%C4%B1z+Kulesi!5e0!3m2!1str!2str!4v1493982877607" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Stil kodlarını Web sitenizin style.css dosyanızın içerisine uygun bir yere kopyalayın, içerik kodlarını ise haritanın görünmesini istediğiniz konuma kopyalayıp kaydedin.

[stextbox id=”warning” caption=”Uyarı”]İçerik kodları bölümündeki <iframe src=” bölümünden sonraki örnek konumu silip kendi istediğiniz konum ile değiştirmeyi unutmayın. [/stextbox]