GoogleMap【CSSのみ】モノクロ地図にする（APIは不要）

2021年3月7日

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）を使っているため、上記の表示回数制限を回避できる。