埋め込みGoogleMapの色を変更する(GoogleのAPI不要)

2023/12/21

埋め込みGoogleMapの色を変更する

ホームページにGoogleMAPを埋め込む際、GoogleMAPの色を変更することができます。

全体の雰囲気を統一できるので便利です。

GoogleのAPI（有料）は使用していません。HTMLへの追記のみでカスタマイズしています。

HTMLへの追記だけでモノトーンに変更

黒っぽく変更

HTML

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567877944444!2d139.8058294865745!3d35.71006260187238!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sus!4v1703148324050!5m2!1sja!2sus" width="100%" height="300" frameborder="0" style="border:0;width:100%;filter: grayscale(100%) invert(92%) contrast(83%);" allowfullscreen=""></iframe>

青の蛍光ペンが追記箇所

filter: grayscale(100%) invert(92%) contrast(83%);

グレーっぽく変更

HTML

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567877944444!2d139.8058294865745!3d35.71006260187238!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sus!4v1703148324050!5m2!1sja!2sus" width="100%" height="300" frameborder="0" style="border:0;width:100%;filter:grayscale(100%);-webkit-filter:grayscale(100%);" allowfullscreen=""></iframe>

青の蛍光ペンが追記箇所

filter:grayscale(100%);-webkit-filter:grayscale(100%);

黄色の蛍光ペンの箇所を差し替えればすぐに使えます。サイズ（width、height）も任意で変更可能です。

cssを利用した場合

cssだけで黒っぽく変更

HTML

<div class="map-custom1">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567877944444!2d139.8058294865745!3d35.71006260187238!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sus!4v1703148324050!5m2!1sja!2sus" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>

css

/*googlemap filter cssのみで黒っぽく変更*/
.map-custom1 iframe {
  filter: grayscale(100%) invert(92%) contrast(83%);
}

cssだけでグレースケールに

cssのみでシンプルにグレースケールにすることもできます。

HTML

青の蛍光ペンの部分をHTMLに追記することでcssを適用できるようにします。

<div class="map-custom2">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567877944444!2d139.8058294865745!3d35.71006260187238!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sus!4v1703148324050!5m2!1sja!2sus" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>

css

グレースケールになるように記述します。

/*googlemap filter cssのみでグレースケールに*/
.map-custom2 iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

ホバーアクション

表示をグレースケールにしてホバーするとカラーに変化する。

HTML

青の蛍光ペンの部分をHTMLに追記することでcssを適用できるようにします。

<div class="map-custom">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567877944444!2d139.8058294865745!3d35.71006260187238!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sus!4v1703148324050!5m2!1sja!2sus" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>

css

ホバーするとカラーになるように記述します。

/*googlemap filter グレースケールをホバーでカラーに*/
.map-custom iframe,
.map-custom object,
.map-custom embed {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all  .3s ease;
}
.map-custom iframe:hover,
.map-custom object:hover,
.map-custom embed:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}