1

I have a requirement to add linear gradient to google maps . Is there any way of achieving the same? My Code looks like below.

HTML

<div id="map"></div>

CSS

#map{
height:100vh;
background: linear-gradient(90deg, #f7f8fa 0%, rgba(247, 248, 250, 0) 18.73%),
    linear-gradient(180deg, #f7f8fa 0%, rgba(247, 248, 250, 0) 30.66%);
}

Script

new google.maps.Map(document.getElementById("map"), {
        center: val,
        zoom: 12,
        streetViewControl: false,      
      });

But the gradient effect is hidden/not showing.

One alternate way I figured is to use an overlay and add the gradient effect but the map zoom and other functionalities not working as a layer is overlaid on top.

Is there any way of applying the effect on google maps container?

Manu
  • 711
  • 8
  • 27

1 Answers1

0

Do you mean this?

.map-container {
    position: relative;
    height: 100vh;
}

.map-over {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    background: linear-gradient(90deg, #f7f8fa 0%, rgba(247, 248, 250, 0) 18.73%), linear-gradient(180deg, #f7f8fa 0%, rgba(247, 248, 250, 0) 30.66%);
}

iframe {
    width: 100%;
    height: 100%;
}
<div class="map-container">
    <div class="map-over"></div>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d413258.1237688799!2d138.73819972285102!3d35.981714685897366!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sru!4v1633711532331!5m2!1sen!2sru" style="border:0;" allowfullscreen=""
        loading="lazy"></iframe>
</div>
Sato Takeru
  • 1,092
  • 1
  • 5
  • 16
  • Yes my requirement is exactly the same but there is an issue, Because of the background overlay the map controls are not working. It will work if we add ```position: absolute``` for the iframe but it will hide the overlay effect. – Manu Oct 09 '21 at 01:20