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

  • obedeay:instagramda fotoğraf lar üzerine nasıl link ekleni...
  • Volkan aras:Whatsapp üzerinden yazbilirmisiniz azerbaycandayım...
  • Davut Selek:Lütfen kapatılan Facebook hesabımın tekrar açılmas...
  • Davut Selek:Herkese kapalı olan gereksiz adlı bir sayfamda yas...
  • selen:Norton Safe Web paralımı acaba...
  • Bora:Harici harddisk'e veri aktarırken aynı sorunla kar...
  • Yılmaz Polat:hesabıma nasıl ulaşılabirlm yardımcı olabilirmsnz ...
  • Gunel:Arkadaslar yahoo mail sifremi unuttum. Yedek maild...

Sponsorlarımız

Minecraft Apk indir