iframeで埋め込んだGoogle マップは、CSSで簡単にモノクロにすることができます。

コード例

HTML

<div>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15108.47238155155!2d98.97199180228937!3d18.79288968157629!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30da3aa23421c875%3A0x9d3b8fabe43926f6!2z44K_44O844Oa44O86ZaA!5e0!3m2!1sja!2sjp!4v1585206241566!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<div>

CSS

div iframe {
  filter: grayscale(100%);
}

参考サイト

• GoogleMapをモノクロに。APIを使わずにcssだけでカスタマイズ。 | LittleThings