I'm currently working on incorporating a CSS arrow on top of a Google map as a design element. The concept involves a horizontal stripe with a downward arrow placed halfway through, and I aim to have this arrow overlay the Google map.
Here is a snippet of my HTML code:
<div class="blue-stripe text-center">
<h1>how to find us</h1>
</div>
<div class="arrow-down"></div>
<div class="google-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.126971437045!2d-0.20244674881875546!3d51.51088651816963!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48760fe34117c0f5%3A0x5e396333c672dd3d!2s43+Ladbroke+Square%2C+London+W11!5e0!3m2!1sen!2suk!4v1458754616197" width="100%" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
The CSS styling for this setup includes responsive adjustments for the Google map:
.blue-stripe {
width: 100%;
background: #223b74;
height: 35px;
margin: 0 auto;
}
.blue-stripe h1 {
color: #fff;
text-align: center;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #223b74;
margin-left: 48%;
z-index: 5000;
}
.google-map {
position: relative;
padding-bottom: 20%; // This is the aspect ratio
height: 0;
overflow: hidden;
margin: 0 auto;
margin-top: -10px;
z-index: 0 !important;
}
.google-map iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
}
Despite attempts using z-index, the issue persists where the Google map overlaps the arrow (with plans to adjust it for production).
To view an example page, please visit: .
Your thoughts or insights would be greatly appreciated.
Thank you, Nigel H