Necesitaba agregar algún efecto de superposición de fondo al elemento de Google Maps. Sin embargo, después de agregar la superposición, los controles del mapa no funcionan, ya que la superposición se encuentra en la parte superior de los elementos del mapa. ¿Hay alguna forma de lograr esto sin afectar los controles del mapa ?

 <div id="maps"></div>

 #maps { min-height: 100vh; height: 100%; } #maps::after { 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%); content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

guion

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

El efecto será similar a la imagen de abajo.

Necesitaba lograr el mismo efecto de mapa sin interferir en los controles del mapa. ¿Hay alguna forma de hacerlo?