フレックスプランニング　お問い合わせせフォーム

ブログBlog

Google Maps APIを使わずにCSSでマップの色を変更する

ブログ

2018年6月のGoogle Maps APIアップデートでGoogleマップを埋め込む際APIキーが完全必須になり、無償で利用できるのが「1日25,000リクエスト」から「月28,000リクエスト」へ大幅に減少してしまいました。（私の周辺でも「Googleマップが急に表示されなくなった！」というトラブルが発生しました。）

何よりも面倒なのが、Developer Consoleにてクレジットカードの登録をしなければならなくなった事。

委託でホームページを制作している場合、お客様にGoogleアカウントを取得していただき、さらにクレジットカードを登録していただくという手間が発生します。

これはなかなか敷居が高い。
しかし、通常のiframeマップはデザインに合わせにくい…

そんな時に使えるのがcssの「filter」プロパティ。
通常のiframeマップに以下のCSSを記述をするだけ！

■グレースケール

iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

 

filterプロパティは半角スペースで値を追加することができます。

■セピア風

iframe {
  -webkit-filter: sepia(100%) brightness(75%);
  -moz-filter: sepia(100%) brightness(75%);
  -ms-filter: sepia(100%) brightness(75%);
  -o-filter: sepia(100%) brightness(75%);
  filter: sepia(100%) brightness(75%);
}

 

Googleマップだけではなく、画像の加工にも使えて便利です。

一覧へ
TOP