Aşağıdaki kod Google’ın varsayılan olarak verdiği harita gömme kodudur.
<iframe style="border: 0;" src="https://www.google.com/maps/embed" width="600" height="450" allowfullscreen="allowfullscreen"></iframe>
Yukarıdaki harita kodu duyarlı değil. Bunun anlamı, sayfayı masaüstü bilgisayarınız dışında bir cihazda açarsanız, Google Haritası ekrana sığmaz ve haritanın tamamını görmek için sayfayı yatay olarak kaydırmanız gerekir.
Aşağıdaki %100 duyarlı biçimde ayarlanmış kodu kullandığınız zaman Google Haritalar, sitenizin açılma veya daralma aktivitesine göre oransal ve duyarlı bir uyum sağlayacaktır.
Aynı Google Haritasını içeren kod, ancak şimdi harita %100 duyarlı bir şekilde kodlanmıştır.
<style>
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>
<div class="google-maps">
<iframe
src="https://www.google.com/maps/embed"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
></iframe>
</div>Tarayıcıyı yeniden boyutlandırırsanız veya sayfayı bir cep telefonunda görüntülerseniz, gömülü harita, görüntülendiği cihazın boyutuna göre kendi boyutunu otomatik olarak ayarlayacaktır.
Duyarlı bir görünüme sahip yeni gömme kodu eklendiğinde haritanız, ayrıca kişiselleştirilebilen bir uyuma sahip olacaktır. Farklı ve kişiselleştirilebilir bir en boy oranı için padding-bottom (satır #4) değerini %75‘ten başka bir değere değiştirebilirsiniz.