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メール必須
お名前(姓)必須
お名前(名)必須

講座・ワークショップ に参加する

2023-04-05
20:00 - 22:00
2023-04-07
20:00 - 22:00
2023-04-08
11:00 - 13:30
15:00 - 18:00
2023-04-09
11:00 - 13:30
2023-04-13
19:00 - 22:00
2023-04-14
19:00 - 21:30
2023-04-15
11:00 - 13:30
14:00 - 16:00
2023-04-18
  • ブックマーク

著者情報

おおひがし のぶひと

大東 信仁

1976年大阪生まれ。鳥取大学大学院博士課程(専門は乾燥地農業)を中退後、零細企業の立ち上げに関わり、スタッフ育成・社内ITならびにWEBシステム開発を担当。6億円の受注プロジェクト案件をまとめる。2011年に過労にて就労禁止(双極性障害)の診断を受け、生き方を見つめなおす。双極性障害を克服し、2014年からフリーランスにてWEB・ITコンサルにてWordPressを得意とした活動を行い、1,200名を超えるコンサル実績を持つ。その中で2009年から書き続けているブログは、4,100記事を超え、2016年には月間65万PVを達成した。2018年に法人化し”株式会社あみだす”となる。現在は、コンサルタントに加えて、自己受容と自己理解を広げ、誰もがそのままで命を輝かせるトランスパーソナル心理学をベースとしたカウンセラーとして”心が通う組織づくり”の支援(企業内コミュニケーション改善コンサルティング)を中心に活躍中。


株式会社 あみだす 代表取締役/岡部明美LPL養成講座 認定心理カウンセラー ・セラピスト(業界歴 5年)/ ブロガー / WordPress & Woocommerceが得意 / 親指シフト歴11年/ orz レイアウト開発者

サービス提供領域

  • WEBコンサルティング
  • WEB・コンテンツ マーケティング
  • SEO コンサルティング
  • WEBサイト制作・運用保守サポート
  • EC サイト制作・運用保守サポート
  • WordPress 導入サポート
  • WordPress 運用サポート
  • SNS コンサルティング
  • Youtube コンサルティング
  • 情報発信 サポート
  • IT・WEBの枠組みを超えた経営支援
  • 講師・ワークショップ 運営サポート
  • 心理カウンセリング
  • 企業様向け コミュニケーション研修
  • 経営者様向け サポート
  • 自己成長・探求 サポート

お仕事のご依頼はこちら

WEB・ITコンサルティング

カウンセリング・セラピー

公式LINE

公式LINEにて、不定期ながら、モニターセッションやお得情報などのスケジュール案内や、心と向き合うコツなどを発信し、日常の中でカウンセリングの視点からの”気づき”を公式LINEにて語ります。ぜひ、ご登録ください。

友だち追加

【案内板】

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

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

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


カテゴリー 一覧