埋め込みGoogleMapの色を変更する

埋め込みGoogleMapの色を変更する

ホームページにGoogleMAPを埋め込む際、GoogleMAPの色を変更することができます。

全体の雰囲気を統一できるので便利です。

GoogleのAPI（有料）は使用していません。cssのみでカスタマイズしています。

標準

通常GoogleMapを埋め込むとこのような表示になります。

標準よりも全体的に明るいトーンにして発色を良くしたり、暗くしたりできます。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1545458808759" width="600" height="450" frameborder="0" style="border:0;width:100%" filter:〇〇; allowfullscreen=""></iframe>

これはGoogleマップの埋め込みコードです。蛍光ペン部分が追記箇所です。ここに追記すると色が変わります。

Google Mapの色を変更する具体例

ここからは具体的に追記した場合の具体例です。

発色を良くする、暗くする

filter:saturate(150%);-webkit-filter:saturate(150%);

filter:grayscale(50%);-webkit-filter:grayscale(50%);

モノトーン

全体をモノトーンにして色を排除しています。

filter:grayscale(100%);-webkit-filter:grayscale(100%);

filter: grayscale(100%) invert(92%) contrast(83%);

色相反転

色を反転させて黒っぽくしています。サイト全体がダークトーンでまとまっている場合などはこちらが自然です。

filter:invert(100%);-webkit-filter:invert(100%);

filter: invert(100%) hue-rotate(-180deg);

特定の色系統にする

埋め込みたいサイトのテーマカラーと同系色にすると統一感が出ます。

filter:hue-rotate(140deg);-webkit-filter:hue-rotate(140deg);

filter:hue-rotate(229deg);-webkit-filter:hue-rotate(229deg);

まとめ

微調整することにより、さらに幅広い表現が可能です。

GoogleMapの埋め込みが必要になるケースは多いので、このようにサイトイメージに合わせて色変更ができると便利です。