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. 
Facebook'ta Paylaş
Whatsapp'ta Paylaş
Facebook'ta Paylaş
Whatsapp'ta Paylaş
Yorumlar

Yorumunuzu Yazın

E-posta adresiniz yayınlanmayacaktır.


Son Yorumlar

  • Seckin taş:İki feisburk hesabım var öncekine nasıl dönüş yapa...
  • inci alp:çok teşekkürler, o kadar kolay hallettim ki ben bi...
  • sabri bulut:harddiski çıkar sonra açma düymesine bas ps2 nin s...
  • admin:Hata nedir? Biraz bilgi verir misiniz?...
  • fatih incegöz:Windows 10 çalışmıyor lütfen yardım edermisiniz...
  • seyhmus:banada yardımcı olabilirmisin...
  • seyhmus:bnde aynı dertten muzdaribim yardımcı olabilirmisi...
  • Özcan uyar:Face hesabımi başka telofana geçeceğim için kapatt...

Sponsorlarımız

Minecraft Apk indir