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

無料メルマガにぜひご登録ください

ブログより日常を書いています。
ものくろキャンプ メルマガ
購読登録フォーム
Eメール  *
お名前(姓)  *
お名前(名)  *

講座・ワークショップ 開催予定

2022-11-11 20:00 – 21:30
金曜夜:こころの発酵 マインドフルネス瞑想会+軽食
詳細・お申し込みはこちら

2022-11-19 11:00 – 13:00
オンライン【あみだす発酵アカデミー】白菜キムチ(キムジャン)作りクラス
詳細・お申し込みはこちら

2022-11-19 15:00 – 17:00
【あみだす発酵アカデミー】本格「王様のコチュジャン」作りクラス/オンライン・リアルどちらもOK
詳細・お申し込みはこちら

2022-11-20 13:00 – 14:30
日曜昼:こころの発酵  マインドフルネス瞑想会+ランチ
詳細・お申し込みはこちら

2022-11-25 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 11月25日
詳細・お申し込みはこちら

2022-12-08 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 12月8日
詳細・お申し込みはこちら

2022-12-09 19:00 – 20:30
金曜夜:こころの発酵 マインドフルネス瞑想会+軽食
詳細・お申し込みはこちら

2022-12-10 11:00 – 13:30
【あみだす発酵アカデミー】本場香港の味 XO醤作りクラス
詳細・お申し込みはこちら

2022-12-10 18:00 – 21:00
2022 あみだす望年会っ
詳細・お申し込みはこちら

2022-12-15 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2022-12-16 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 12月16日※12月のみ第3週目となります
詳細・お申し込みはこちら

2022-12-17 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2022-12-18 13:00 – 14:30
日曜昼:こころの発酵  マインドフルネス瞑想会+ランチ
詳細・お申し込みはこちら

2022-12-30 10:00 – 18:00
リアル・オンラインどちらもOK!ものくろ流WordPressスタートアップ講座 -第42期- 講師 ものくろ
詳細・お申し込みはこちら

2023-01-12 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-15 11:00 – 13:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-21 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

  • ブックマーク

【案内板】

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

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

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