今回は、Webサイトなどに埋め込み表示したGooglemapにフィルターを掛けてカスタマイズする方法についてご紹介させて頂きます。比較的簡単なカスタマイズですので、サイトのデザインに合わせて簡単な工夫を加えたいという方は参考にしてみてください。
【HTML/CSS】サイトに埋め込み表示したGooglemapのカスタマイズ
Googlemapは多くの方が一度は利用したことのあるマップツールで、Webサイト内で見かける機会も多いと思います。
Googlemapには、主に下記のようなカスタマイズ方法があります。
- CSSを使用したカスタマイズ
- Googlemap APIを使用したカスタマイズ
CSSを使用したカスタマイズは、CSSの記述を数行追加するだけで、簡単な変更が加えられますが、マップをiframeで読み込んでいる為、細かいところまでの変更はできません。
それに比べてGooglemap APIは、吹き出しの変更など様々なカスタマイズが出来ますが、設定が難しく時間が掛かる為、一工夫加えたいという方にはCSSのみの変更をオススメします。
では早速、次項でCSSの記述について説明させて頂きます。
CSSを使ってGooglemapをカスタマイズする
今回、紹介するGooglemapのカスタマイズは、「filter」というCSSプロパティをメインに使います。デフォルト表示はフィルターが掛かった状態での表示、ホバーしたらデフォルトの地図の色、見た目になるようにCSSで記述を追加していきます。
主に画像に使います。明るさやコントラスト、ぼかしなどの効果を対象物に適用することが出来ます。
filterプロパティでGooglemapにフィルター加工を付ける
①モノクロで表示
<div class="map-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13050.953042471843!2d136.92035500743228!3d35.13820470010975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60037a726a523159%3A0x904e4e90d7aee9de!2z5ZCN5Y-k5bGL5biC56uL5aSn5a2mIOa7neWtkOOCreODo-ODs-ODkeOCuQ!5e0!3m2!1sja!2sjp!4v1663203490035!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>/*map filter*/
.map-wrapper iframe,
.map-wrapper object,
.map-wrapper embed {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.map-wrapper iframe:hover,
.map-wrapper object:hover,
.map-wrapper embed:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}「filter」部分がフィルターの記述、「transition」で色が変化するまでの時間を変更しています。filterプロパティは現在IE未対応で、旧版Chromeにも適用させるためベンダープレフィックス「-webkit-」を指定しています。
※HTMLは全て記述が同じなので、次のフィルターから記述を省きます。
②彩度の変更
/*map filter*/
.map-wrapper iframe,
.map-wrapper object,
.map-wrapper embed {
-webkit-filter: saturate(40%);
filter: saturate(40%);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.map-wrapper iframe:hover,
.map-wrapper object:hover,
.map-wrapper embed:hover {
-webkit-filter: saturate(0%);
filter: saturate(0%);
}彩度は下げればほぼモノクロに近くなりますが、モノクロに近い色を持たせたい場合は「saturate」で彩度を変更します。
③ぼかし加工
/*map filter*/
.map-wrapper iframe,
.map-wrapper object,
.map-wrapper embed {
-webkit-filter: blur(2px);
filter: blur(2px);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.map-wrapper iframe:hover,
.map-wrapper object:hover,
.map-wrapper embed:hover {
-webkit-filter: blur(0);
filter: blur(0);
}blur（ブラー）を指定することで、フィルターにぼかしを設定することが出来ます。
前へ
