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は、仕様や使い方、実装のルールと一緒に公開されています。アイデア次第でいろんなことができそうだ。

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は見てるだけで旅をしているみたいに楽しい気持ちになるので、すきです。