Written by Kasumi

APIを使わず、GoogleMapを白黒でサイトに埋め込む方法

GoogleMapを白黒でサイトに埋め込みたい。

本記事ではこのような悩みを解決。

実装方法について解説します。

CSSで装飾する。

  .googlemap {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
  }

googlemapを白黒にするCSSコードです。

googlemapをサイトに埋め込む際はiframeを使います。

iframeに任意のクラスを付与。

そのクラスにfilter: grayscale(100%);をCSSで付与する事で実装可能です。

上記のように白黒になれば成功です。

まとめ

白黒にはしたが、目的地アイコンのピンだけ色を入れたい。。

その場合はGoogle Maps APIを取得して頂く必要があります。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

【簡単】スマホのぱんくずを一行にして、はみ出した分を横スクロールで見せる方法

2022.01.17
756
HTMLCSS プログラミング

tableタグのtd、thに入ってる文字がスマホだとサイズがおかしくなる原因【改善】

2021.06.03
5674
HTMLCSS プログラミング

CSSで画像の高さを一律にそろえる方法【結論:object-fitを使えば簡単です】

更新日:2021.01.08
9621
HTMLCSS

CSSで透過グラデーションを作成する方法

2023.01.20
5372