2020.10.15  2021.04.04

CSSを使って埋め込んだGoogleMapを白黒にする方法を紹介

皆さんこんにちは!マコブログです!
今回は、CSSを使って埋め込んだGoogleMapを白黒にしていきたいと思います!

GoogleMapは、<iframe>で簡単に読み込むことができ、サイズの調整やピンマークのレイアウトなど、様々なカスタマイズが用意されており、
WEB制作の場面には頻繁に登場しますよね。



今回は、このgooglemapを白黒にして、マウスホバーした時だけカラー表示にしようと思います。

使用するのは埋め込み用の<iframe>とcssだけです。

まず、googlemapを埋め込みたい場所に<iframe>を記述してgoogleマップを表示させてください。

その後、iframeタグを、divタグなどで括り、そこに任意のクラス名をつけてください。

<div class="G_Map">
<iframe src="" width="1920" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>


こんな感じです。

上記が記述し終わったら、SCSSで下記の記述をします。

.G_Map {
 overflow: hidden;
 filter: grayscale(100%);
 transition-duration: 0.3s;
 &:hover {
 filter: grayscale(0%);
 }
}

これでGoogleMapを白黒にする方法は完了です!

今回の肝は

 filter: grayscale(100%);

↑↑↑↑
こちらです。

CSS3のfilterは、指定した要素のカラーリングを自由に変更することができるプロパティです。

grayscaleという値を指定することで、要素を白黒度合いを自由に変更できます。

また、:hover(疑似クラス)と併用することで、マウスホバー時にだけ元のカラーに戻すといったことが可能になります!


まとめ

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

今回は、CSSを使って埋め込んだGoogleMapを白黒にする方法を紹介しました。

WEBを制作する中で、GoogleMapのカスタマイズはよくある話です。

今回の記事を読んでWEB制作者の方やプログラミング初心者の方のお力になれたらと思います!

こちらの記事も是非チェックしてみてください↓
https://makoblog.net/wordpress/mwwpform/2020-10-323.html

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →