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