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