GoogleMapの埋め込みで見た目を良くする方法

会社ホームページでよく見かけるGoogleMapですが、標準デザインはなんとも味気なく感じてしまいます。 でも、ピンアイコンを変えたり、デザインを大幅に変更したい場合は、GoogleMapAPIを導入しなければいけなくて設定などがめんどくさいし、 一定アクセスを超えたら料金が発生するので、個人的にはあまり使いたくないのが本音です。 そこで、API導入をしなくてもできる範囲のGoogleMapデザインについて、サンプルを作ってみたので、使える！と思った人は、感謝の念を込めてコピペしてくだされ。

標準

いつもの見慣れたカラーバランスが、パステルカラー調というだけの標準の見た目です。

グレースケール

黒々ベースのホームページであれば、グレースケールをセットすると簡単に色調統一できてしまうでしょう。

セピア

古びた写真のような効果を出してくれるセピア調ですが、黄色の強い色味になってしまうのが、少しダサく感じるかもしれません。 ※設定値を少し変えてあげることで、若干いい感じの見た目になるかもです。

色味変更

CSS-filterのhue-rotateという機能を使うと、色味をローテートさせることができます。 色味のローテートは、下の図をイメージするとわかりやすいと思います。

単一色

一番オススメなのがこの書き方です。 セピアを別の階調にローテートしてあげることで、ページの色味に合わせられます。 【色味調整機能】 セピア : 色味 :

簡単設置方法

GoogleMapをホームページに簡単に設置する手順を初心者向けに書いておきます。 ※パソコンでの設置方法です。（スマホでは下記の操作はできません）

1. GoogleMapページに移動

https://www.google.co.jp/maps/

2. 地図を表示したい場所を検索

共有ボタンをクリック

地図を埋め込むタブに移動

HTMLをコピー

タグを埋め込んでスタイルシートをセット

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7477988419528!2d139.7428579759379!3d35.65858483121741!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1714517455545!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" style="border:0; filter: sepia(100%) hue-rotate(180deg) ; -webkit-filter: sepia(100%) hue-rotate(180deg);"></iframe> style属性または、styleタグ、linkタグどれで記述しても問題ありません。 サイズもスタイルシートで記述することで、レスポンシブ対応できますヨ。

あとがき

ホームページに簡単に設置できるGoogleMapをよりページに見合ったデザインにすることで、せっかくデザインしたのに、浮き立ってしまっている地図表示を座りの良いページにすることができます。 こういうトコロに気を配っているデザイン会社さん、意外と少ないのかもしれないな〜。