【API不要・コピペ】埋め込みGoogle Mapの雰囲気をちょっとカスタマイズする小技

APIのいらないiframe埋め込み方式のGoogle Mapの雰囲気をカスタマイズする小技です。あくまでfilterプロパティやmix-blend-modeプロパティを使ってサイトの雰囲気に合わせたいという場合に使える手法です。

今回紹介している事例はどれも次のHTMLを使用しています。

<div class="googleMap">
  <iframe
    src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d1919.2197492991622!2d139.74409966689956!3d35.658745778409326!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1624349757460!5m2!1sja!2sjp"
    width="600"
    height="450"
    style="border: 0"
    allowfullscreen=""
    loading="lazy"
  ></iframe>
</div>

また、記事中のCSSはSCSS記法で紹介しています。注意点として、地図表示でのテイストに合わせているので、航空写真などでは変な見た目になる可能性があります。

色味調整

全体的な色味を変更する方法です。ここで紹介する手法は基本的にGoogle Mapの上に色付き要素を被せてmix-blend-modeなどで見た目を変えるものになります。

.googleMap {
  margin-bottom: 48px;
  position: relative;
  width: 600px;
  height: 450px;
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: #ff6c00;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: hue;
    pointer-events: none;
  }
}

mix-blend-mode: hueを使うと重ねた色の色相で上書きされます。あくまで色相しか変えないので、重ねた色の彩度や明度は影響されません。（濃いオレンジでも薄いオレンジでも結果は変わらない）

彩度や明度を変更する場合はGoogle Mapの<iframe>にfilterプロパティを使って調整します。

.googleMap {
  margin-bottom: 48px;
  position: relative;
  width: 600px;
  height: 450px;
  iframe {
    filter: saturate(5) brightness(1.02); // 彩度・明度を強める
  }
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: #ff6c00;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: hue;
    pointer-events: none;
  }
}

ちなみに明度（brightness）を強くすると白飛びしがちなので注意してください。

ダークモード

色を反転させるinvert()をうまく使うとダークモード風の色合いも設定できます。

.googleMap {
  margin-bottom: 48px;
  position: relative;
  width: 600px;
  height: 450px;
  iframe {
    filter: invert(100%) brightness(300%);
  }
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: #496373;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: color;
    pointer-events: none;
  }
}

濃い緑色を使うとMatrix風にもなります。

グレースケール

Google Mapの<iframe>にfilter: grayscale(1)をかけることでグレースケールに変更できます。

.googleMap {
  margin-bottom: 48px;
  position: relative;
  width: 600px;
  height: 450px;
  iframe {
    filter: grayscale(1);
  }
}

シンプルなサイトには何かと合わせやすい表現な気がしています。

レトロ

茶色で色を被せて、さらに内側のドロップシャドウをつけてレトロ調にしています。

.googleMap {
  margin-bottom: 48px;
  position: relative;
  width: 600px;
  height: 450px;
  iframe {
    filter: saturate(4);
  }
  &:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background-color: #a0957d;
    z-index: 1;
    mix-blend-mode: color;
    pointer-events: none;
  }
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: inset 0 0 60px 0px rgba(92, 69, 15, 0.7);
    pointer-events: none;
    z-index: 2;
  }
}

---

ここからの2つは実用性から少し離れてお遊び要素が強いです。工夫次第でいろんな表現の可能性が秘められています。

---

ゲーミングマップ

ちょっと目が痛いかもしれませんが、ゲーミングPCのようにカラフルです。filterプロパティをアニメーションさせています。このようにエフェクトのアニメーションも可能です。

.googleMap {
  margin-bottom: 48px;
  position: relative;
  width: 600px;
  height: 450px;
  iframe {
    animation-name: hue-rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
}

@keyframes hue-rotate {
  0% {
    filter: hue-rotate(0deg) saturate(2);
  }
  50% {
    filter: hue-rotate(180deg) saturate(2);
  }
  100% {
    filter: hue-rotate(360deg) saturate(2);
  }
}

レインボー

かぶせるレイヤーをlinear-gradient()でレインボーにします。単色ではなくグラデーションや画像も使えるので、面白い使い方もできるかもしれません。

.googleMap {
  margin-bottom: 48px;
  position: relative;
  width: 600px;
  height: 450px;
  iframe {
    filter: saturate(4);
  }
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background-image: linear-gradient(
      90deg,
      red,
      orange,
      yellow,
      green,
      skyblue,
      blue,
      purple
    );
    mix-blend-mode: hue;
    pointer-events: none;
  }
}

まとめ

filterプロパティやmix-blend-modeプロパティを使うと要素にエフェクトを追加できます。同様の手法でGoogle Mapではありませんが、画像をInstagram風に加工するCSSもあります。

https://picturepan2.github.io/instagram.css/

追記

SafariとiOS Safariでで色がかぶって見えなくなる不具合があるみたいです…