WEB系キャンパス

GoogleMapをAPIを使わずiframeでグレーに変更する

GoogleMAPをサイトに設置して、オリジナルアイコンをつけたりするのは、GoogleMAPのAPIを設置して、アイコン画像用意して配置してなんとかかんとか…って手順が必要ですが、iframeで設置するGoogleMAPでも白黒にするぐらいはCSSでサクッとできます。

使用するのはCSSのfilterプロパティです。

iframe{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

クールな感じのサイトでは、白黒の方がデザインの邪魔にならないかな。

DEMO

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です