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を取得して頂く必要があります。
以上で解説を終わります。
目次