【マップ】Googleマップにカラーオバーレイを適用

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;
}