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

白坂翔
白坂翔

1984年生まれ。ボードゲームカフェJELLY JELLY CAFEオーナー、将棋カフェCOBINオーナー、マーダーミステリー専門店Rabbitholeプロデューサー、株式会社人狼の代表取締役。ポーカーとゴルフが好きです。MORE

あわせてどうぞ

やっぱりキーボードはHappy Hacking Keyboardしか考えられない