How to add linear gradient overlay on google maps iframe?

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>