GoogleMapをモノクロに。APIを使わずにcssだけでカスタマイズ。

2019.06.20

#css #デザインメモ

GoogleMapがいかにも地図です。
地図なので当たり前ですが、地図の色味がデザインの邪魔をしているように感じることが・・。

モノクロにしたい。
iframeを使ってシンプルに地図のみ表示させているページなので、cssだけでカスタマイズ。

cssだけでモノクロにできたよ。iframeにfilter

埋め込んでいるiframeに対して、cssのfilterを使います。モノクロにしたいので、grayscaleを100%に。

<div class="googlemaps">
<iframe loading="lazy" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13005.188013706975!2d139.639598!3d35.422672!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x74c95b0a77580f9c!2z6aas44Gu5Y2a54mp6aSo!5e0!3m2!1sja!2sus!4v1550932726643" width="800" height="300" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>

.googlemaps iframe,
.googlemaps object,
.googlemaps embed {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

マウスオンしたら元の色付き地図に戻す

.googlemaps iframe,
.googlemaps object,
.googlemaps embed {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all  0.7s ease;
}

.googlemaps iframe:hover,
.googlemaps object:hover,
.googlemaps embed:hover {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
}

ただおしゃれなだけでは地図の意味を失う気がしたので、マウスをオンしたら元の色付き地図に戻るように。hoverしたらgrayscaleのfilterを0にしています。
もわっと切り替えたいので、元の要素にtransitionを入れます。

このページで実装しているよ

根岸競馬記念公苑

ところで、APIってなんでしょう・・？

APIは「アプリケーションプログラミングインタフェース」の略。

機能やデータなど、アプリケーションの持つ情報を他のアプリケーションに共有ができるようにしたものです。

・・と、言われてもあまりピンときませんが、身近なところではFacebookの投稿をWEBサイトに表示させるとか、Pintarestのピンする機能をサイトで利用したりなど、異なるシステム間であってもAPIを使うと連携ができ、誰もが利用できるようになるという大変便利な仕組みです。

APIは、仕様や使い方、実装のルールと一緒に公開されています。

例えば・・地図+お天気+交通情報などをAPIで引っ張ってきて、その日の営業ルートを決めるアプリとか。

お花の開花時期や日の出日の入り時刻を基に、最適な写真撮影コースやカメラの設定をおすすめするサービスとか。あ、これはあったらいいな。誰かつくってください。

WEBサービスだけでなくIot分野も、それから、金融や物流などの業務システムも・・アイデア次第でいろんなことができそうですね。

Google Maps API はサーバサイドのプログラムではなく、ブラウザ側で処理をする時に動作するクライアントサイドのjavascriptを使っています。

Ajaxという非同期通信の仕組みを用いて一部の情報だけ、サーバと送受信。

ページ遷移せずにデータを受け渡す、サーバと通信する・・ということができるので、ブラウザを再読み込みしなくても拡大縮小や移動が可能で、常にピンポイントで地図の情報を読み込むことができてます。地図という膨大な情報量、全部読み込んで通信してたら大変。