埋め込みGoogle Mapsの色をサイトの配色に合わせる方法

Feb 20, 2013

Google Mapsの色をサイトのテイストに合わせればいいな、と思ったことはありませんか?
できるんです!色や明るさ、彩度などもカスタマイズできるんです!

実際にカスタマイズ地図を実装してみた例はこちらです。↓

人狼フェスティバル2013

必要なファイルや設定方法は、以下を参考にさせていただきました。とても分かりやすいです。
Google Map を簡単お洒落にカスタマイズ!「Styled Map Wizard」使ってみた。 | バシャログ。

上記の紹介記事では、彩度を0に設定した例でしたが、(saturation: -100)
彩度だけでなく、色相も変更することができるので、サイトのテイストに合わせたマップの色が実現可能です。

上図の緑地図に関しては、
saturation: -50
で彩度をすこし落とし、
hue:”#5eff00″
と色相を設定することで実現しています。

実際のソースはこのURLhttp://fes.jinraw.com/map/mapstyle.jsで見れるので、
ぜひ参考にしてみてください!

白坂翔
白坂翔

東京のWEB制作会社の代表をしています。デザイナー兼ディレクター。
JELLY JELLY CAFEというお店のオーナーでもあります。MORE

LINE@やってます

'stats.label.addfriend' (MISSING TRANSLATION)

あわせてどうぞ

会社名失敗したけど今後ともご指導ご鞭撻の程よろしくお願いします