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

ブログBlog

  •  >
  • ブログ >
  • Google Maps APIを使わずにCSSでマップの色を変更する

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