カウンセラー / WEB・ITコンサルタント 大東 信仁（ものくろ） 
GoogleMapを白黒で表示すると、サイトページの雰囲気に合わせやすい。
丸っと白黒にカスタマイズするなら、APIを使わずにCSSだけで実現できる。
前段取りに、GoogleMapから埋め込みHTMLを取得する。そのHTMLをgooglemap-bw クラスで囲む。こんな感じ↓
<div class="googlemap-bw">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12960.77962976761!2d139.7851604!3d35.696821!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x7c02499fc87c9cfd!2z44Kt44OD44OB44Oz44K544K_44K444KqIEtpdGNoZW4gQmVl!5e0!3m2!1sja!2sjp!4v1615066703184!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>CSSに以下のコードを追加する。
.googlemap-bw iframe {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}WordPressの場合は、[外観]>[カスタマイズ]>[追加CSS]に追記するとOKだ。
CSSのベンダープレフィックスで書いているが、CSSの内容としては、グレースケールで表示（つまりモノクロ）に変更せよ、という内容だ。
実際のサンプルがこちら↓
ピンだけを赤くしたい場合は、APIを使ったカスタマイズが必要となる。
JavaScriptのコードが書く手間だけでなく、Google Maps Platformを利用するため、月間28,000マップロード（表示回数）以上になると費用が必要になる。
このCSSのみの手法は、HTML埋め込み（iframe）を使っているため、上記の表示回数制限を回避できる。
