Google マップ 埋め込み地図の見た目をモノクロにする方法
最終更新日 - 公開日 2022.12.22
by
Google マップ 埋め込み地図の見た目をモノクロにする方法を紹介します。
例えば、APIを使わずに見た目をカスタマイズしたいときに便利な方法です。
GoogleMap 埋め込みの見た目をモノクロにする方法
GoogleMap のカスタマイズには API を利用する方法がありますが、APIコードの取得は敷居が高いため、CSSを利用して見た目を変更できる方法を紹介します。
CSS filter を使ってモノクロ表示
埋め込みタグを使って配置した GoogleMap に対して、CSS で次の指定を行います。
iframe{
filter: grayscale(1);
}
クラス名の指定は任意の値に変更してください。
CSS filter を使うことで、外側から色の指定を行うことで、GoogleMapの色を変えることができます。
まとめ
GoogleMap 埋め込みの見た目をモノクロにする方法を紹介しました。