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

         

CSS

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

2022年10月24日 8:00 

【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のみで様々な色味に変えることができるので、サイトに合わせて変えてみてくださいね。

関連記事

この記事を書いた人

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます!