埋め込み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で見れるので、
ぜひ参考にしてみてください!