Google My Maps埋め込みiframeのカスタマイズ

Google Maps Platform Googleも無料提供が苦しくなってきた

GoogleはGoogle Maps Platformを2018年6月にスタートさせました。Android、iOS、ウェブブラウザ、HTTP経由で利用できるGoogleが提供するWeb地図サービスです。 Webサイトやアプリに利用するために必要なツール(API)を提供しています。カスタム機能、レイヤ描画機能、ストリートビューや視点変更の操作性など、あらゆる要素で、全てのニーズを満たすGoogle Maps Platform 。「マップ」「ルート」「プレイス」の世界的でリアルタイムな技術と情報量をビジネスに生かす有料サービスです。これを利用するためのwebサービスビジネスも盛んになってきました。知識がなければGoogleにも業者にも課金しなければならないということです。
現在サイトに地図を表示させるにはGoogleからAPIキーを取得しなければなりません。しかし、APIキーを取得していてもGoogle Maps Platform において支払情報を設定し、紐づけなけれなりません。紐づけすれば200ドルまでの無料枠がもらえます。それを超えた分だけ支払うシステムです。

しかし、アイコンのカスタマイズとレイヤーは使いたいが、プログラムから操作する必要がないならMy Mapsを利用し、そこで作成した地図の共有と、埋め込みは無料で利用できます。My Mapsで地図を作成し、取得したiframeのコードを自分のサイトに埋め込んでカスタマイズして使用することはまだAPIの取得は必要ありません。いつまでこれが許されるかはわかりませんが・・・。でも、今まで無料で使用させてくれてありがとうGoogleさん。

現在できること、「iframe」をcssのfilterプロパティーを利用してカスタマイズしてみましょう。

プロパティfilterプロバティに指定できるエフェクト関数

「iframe」の見た目をfilterプロパティをcssでカスタマイズします。しかしIE系はほぼ未対応。ちなみにIEのシェアって、2019年2月現在、日本ではIE11とEdge7合わせて20%、世界では10%くらい。このところEdgeが伸びてきているらしいです。どちらにしてもIE系のバージョンアップを急いでほしいと、声を大にして言いたいです。

エフェクト関数処理値(初期値:太字)対応ブラウザパフォーマンス
grayscaleモノクロ0〜100%webkitvery fast
sepiaセピア0〜100%webkitvery fast
saturate彩度0〜100%〜700%webkitvery fast
hue-rotate色相回転0〜360degwebkitfast
invert反転0〜100%webkitvery fast
opacity透明度0〜100%webkitcan be slow
brightness明るさ0〜100%〜300%webkitfast
contrastコントラスト0〜100%〜300%webkitfast
blurぼかし0〜10pxwebkitslow unless accelerated
drop-shadow例: 0 0 2px blackwebkitcan be slow

※deg:《略語》 degree; degrees.

対応ブラウザ webkit:Google Chrome Opera Safariなど

最新のスマホを含むCSS Filter Effectsの対応状況:Can I use… Support tables for HTML5, CSS3, etc

サイトの雰囲気や好みに合わせて

オリジナル cssの指定なし

 

色相回転

CSS

色相を回転とは
これは色相環もしくはカラーホイールといって近い色(厳密には計算している)並べて円環にしたものです。例えばこの画像のオレンジの色にfilter: hue-rotate(90deg);を適用すると、色相環を反時計回りに90°ずらした色(緑色)になります。※deg:《略語》 degree; degrees.

 

階調反転

ネガフィルムのような効果

CSS

 

彩度の指定を変える

色が鮮やかで可愛く見えます

CSS

 

複数の関数を組み合わせて

関数を組み合わせて設定することもできます。

CSS

 

モノクローム

無彩色でファッショナブルに

CSS

 

マウスオーバーで変化

hoverして変化させます。

 

CSS

おわりに

Googleの高い技術をビジネスにおいてガンガン使うことは有料になっても仕方がないことかもしれませんが、個人使用において、しばらくMy Mapsは便利に使いたいですね。cssのfilterプロパティのエフェクト関数を使用してカスタマイズすれば、Photoshopで画像の加工をすることなく多彩な表現ができます。IE系のブラウザに未対応なのがとても残念です。早くバージョンアップして欲しいです。

CSSのfilterプロパティの項目を画像を見ながら調整できる便利なサイトを紹介します。

 

シェアする?

336

Recommended

1

日本最大級のビデオオンデマンド<U-NEXT ...

2

もくじ1 奇皇后~二つの愛涙の誓い~2 奇皇 ...

3

もくじ1 まずは環境2 配信サイトを比較して ...

4

もくじ1 自宅で充実した動画ライフをおくりた ...

5

もくじ1 Air Receiverをつかうた ...

更新日:

Copyright© 韓流ドラマ感想・評価・ランキング・おススメ:韓国ドラマにぞっこんvivien's note , 2019 All Rights Reserved.