【API不要】Googleマップの色味を変える方法

こんにちは、hgmです。

今回はAPIを使用せず、CSSのみでGoogleマップの色を変更する方法をご紹介します。

CSSコピペで簡単に装飾がつけられますので、ぜひ試してみてくださいね。

モノクロ

iframeにCSS「filter」プロパティの「grayscale」を設定することでモノクロにすることができます。

See the Pen
Untitled by Sara Higuma (@higuma)
on CodePen.0

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

モノトーン・シンプルなサイトに合いそうですね！

セピア

iframeにCSS「filter」プロパティの「sepia」を設定することでセピアにすることができます。

See the Pen
Untitled by Sara Higuma (@higuma)
on CodePen.0

iframe{
  filter: sepia(50%);
  -webkit-filter: sepia(50%);
}

レトロな雰囲気のサイトにおすすめです。

色相

iframeにCSS「filter」プロパティの「hue-rotate」を設定することで色相にすることができます。

See the Pen
Untitled by Sara Higuma (@higuma)
on CodePen.0

iframe{
  filter: hue-rotate(140deg);
  -webkit-filter: hue-rotate(140deg);
}

サイトの雰囲気に合わせて色相の度合いを変更してみてください。

階調反転

iframeにCSS「filter」プロパティの「hue-rotate」を設定することで階調反転にすることができます。

See the Pen
Untitled by Sara Higuma (@higuma)
on CodePen.0

iframe{
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

SFやゲームの世界観にぴったり！

透過

iframeにCSS「opacity」を設定することで階調反転にすることができます。

See the Pen
Untitled by Sara Higuma (@higuma)
on CodePen.0

iframe{
  opacity: 0.7;
}

iframeをdivで囲い、divに背景色をつけると上記のように好きな色のマップにすることが可能です。

おまけ

See the Pen
Untitled by Sara Higuma (@higuma)
on CodePen.0

.mono iframe{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: 0.4s;
}
iframe:hover{
  filter: none;
  -webkit-filter: none;
}

ホバーした時にフィルターを解除し、デフォルトの色を表示させることができます。

まとめ

いかがでしたでしょうか？

サイトによってはデフォルトのカラーだと色味が合わない事があると思いますが、こちらを使用すればAPIを使用しなくてもCSSのみで様々な色味に変えることができるので、サイトに合わせて変えてみてくださいね。