seo dersleri

Web Site için Responsive Google Maps Konumu Yapma

Web Site için Responsive Google Maps Konumu Yapma

Özellikle kurumsal Web siteler adres ve konumlarını harita üzerinde göstermektedir. Ancak harita üzerinde konumunuzu işaretledikten sonra ’ı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 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.

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. 

Konu İle İlgili Görüşlerinizi Buradan Paylaşabilirsiniz.

facebook twitter youtube google+ feedburner feedburner

SPONSORLARIMIZ

Clash of Clans Hile Apk indir