Cannot access the google map if the linear gradient is applied?

Question

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>

Could you describe what you want to achieve. Is it just a different colouring of the map? A snippet of code showing the problem would be helpful as well. — A Haworth, Jan 08 '22 at 11:53
If you put an element above the map you cannot access it. This question already [has no answer](https://stackoverflow.com/questions/69499207/add-gradient-effects-or-box-shadow-or-similar-effects-to-google-maps) - you have to approach the problem other way. — skobaljic, Jan 08 '22 at 12:05
I have to point you to [this answer](https://stackoverflow.com/questions/3680429/click-through-div-to-underlying-elements) - to use `pointer-events: none;` on the overlay. Seems it works fine, at least in Firefox - check it on [caniuse](https://caniuse.com/pointer-events). — skobaljic, Jan 08 '22 at 12:14
@AHaworth Yes I have updated the question ,so once the linear gradient is applied on the google map ; then I cannot access the google map. So how can I access the google map? — user16616459, Jan 08 '22 at 12:15
Please read above comments. You can [check it live here](https://jsfiddle.net/skobaljic/3Lvatshy/). — skobaljic, Jan 08 '22 at 12:16

Cannot access the google map if the linear gradient is applied?

0 Answers0