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

  • ブックマーク

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

0

無料メルマガ発行中

メルマガも2021年は頑張って書いています。ぜひ登録して読んでくださいね。(無料です)

メールマガジン
無料で購読
メールアドレス *
* 必須項目

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。


Youtube

  • ブックマーク

この記事を書いた人

情報発信ナビゲーター 大東 信仁

情報発信ナビゲーター / 博士課程中退 / ニックネーム : ものくろ / ブロガー / WordPressが得意 / orz レイアウト開発者 / 株式会社 あみだす 代表取締役