Hey Guys I am trying to add linear gradient on Google Maps iframe ,I successfully added the overlay div on the iframe using position relative and absolute concepts ;but if I do it that way I am not able to access the map.
.map{
position: relative;
}
iframe{
z-index: 1;
}
.overlay{
position: absolute;
width: 100%;
height: 450px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgb(51, 51, 51));
top:0;
z-index: 0;
}<div class="map_section">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d424143.2713133365!2d150.65178422173113!3d-33.84792702661292!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b129838f39a743f%3A0x3017d681632a850!2sSydney%20NSW%2C%20Australia!5e0!3m2!1sen!2sin!4v1641639710179!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" class="map_bg" >
</iframe>
<div class="overlay"></div>
</div>
</div>