Google マップ 埋め込み地図の見た目をモノクロにする方法

Google マップ 埋め込み地図の見た目をモノクロにする方法を紹介します。
例えば、APIを使わずに見た目をカスタマイズしたいときに便利な方法です。

1. GoogleMap 埋め込みの見た目をモノクロにする方法
   1. CSS filter を使ってモノクロ表示に

GoogleMap 埋め込みの見た目をモノクロにする方法

GoogleMap のカスタマイズには API を利用する方法がありますが、APIコードの取得は敷居が高いため、CSSを利用して見た目を変更できる方法を紹介します。

CSS filter を使ってモノクロ表示

埋め込みタグを使って配置した GoogleMap に対して、CSS で次の指定を行います。

iframe{

  filter: grayscale(1);

}

クラス名の指定は任意の値に変更してください。
CSS filter を使うことで、外側から色の指定を行うことで、GoogleMapの色を変えることができます。

まとめ

GoogleMap 埋め込みの見た目をモノクロにする方法を紹介しました。