
GoogleMapをモノクロに。APIを使わずにcssだけでカスタマイズ。
2019-06-20 | web
GoogleMapがいかにも地図です。
地図なので当たり前ですが、地図の色味がデザインの邪魔をしているように感じることが・・。
モノクロにしたい。
iframeを使ってシンプルに地図のみ表示させているページなので、cssだけでカスタマイズ。
cssだけでモノクロにできたよ。iframeにfilter。
埋め込んでいるiframeに対して、cssの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%);
}
あら。地図がおしゃれに。
マウスオンしたら元の色付き地図に戻す
.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という非同期通信の仕組みを用いて、一部の情報をサーバーに送受信しています。
ページを遷移せずにデータを受け渡したり、サーバと通信をしたりができるので、ブラウザを再読み込みしたりページ遷移をしなくても拡大縮小ができたり移動したり、常にピンポイントで地図の情報を読み込んだりができています。
Google Maps APIを使えば、もっといろんなことができる
表示するだけのシンプルな地図は「Google Maps Embed API(iframeの埋め込み地図)」が便利ですが、Google Maps APIを使うともっといろいろなことができます。
色をカスタマイズしたり、アイコンをすきな画像に変えたりなどはもちろん、地図上に線を引いたり、ルート計算や所要時間の計算、データを表示させマップ上で可視化させたりなどなど、いろんなことができるのですね。
2018年6月11日から「Google Maps Platform」というサービスがスタートしてGoogle Maps APIの料金形態が変わり、マップへのリクエスト数によって料金が発生します。
Google Maps Platform マップ、ルート、プレイスの料金設定
地図がだいすきです。
Googlemapは見てるだけで旅をしているみたいに楽しい気持ちになるので、すきです。