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