GoogleマップにCSSでカラーオバーレイを適用します。
CSSのコードです。
Googleマップを表示させるfigureタグの上に、疑似要素afterをposition: absolute;で重ねます。mix-blend-mode: overlay;を指定することでカラーオバーレイが適用されます。
ポイントはカラーオバーレイにpointer-events: none;を指定することです。この指定がないとマップのズーム等のコントローラーが操作できません。
#maps {
position: relative;
width: 100%;
max-width: 700px;
height: 500px;
margin: 0 auto;
padding: 0;
}
#maps::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #a5b862;
mix-blend-mode: overlay;
pointer-events: none;
}