RailsでGoogle mapsを使いこなすためのメモ 2 / 地図デザインのカスタマイズ

Google mapsでフォルトの地図表示は見やすくていいんだけど、「自分のウェブサービスとデザインが合わない!合わせたい!」ということも多いはず。結構簡単にカスタマイズできた。

  
RailsでGoogle mapsを使いこなすためのメモシリーズ

  1. 地図(現在位置を中心とした地図)を表示

  2. 地図デザインのカスタマイズ 今ココ

  3. 表示範囲に含まれる情報をDBから取り出す

  4. 取り出したデータを使って地図にピンを落とす

  5. すでに存在するピンは再度取得しないようにする
      

前回は地図を表示させるだけでしたが、今回はその地図の表示を少しカスタマイズする場合のメモ。ものすごく細かく設定できるので、高速道路だけ赤にしたい!なんていうのも可能。

前回のコードに下記を加えます。
google_maps.coffee.erb


# スタイル定義
map_style_options = [
    {
        featureType: 'all',
        elementType: 'geometry',
        stylers: [{ hue: '#6d4d38' }, { saturation: '-70' }, { gamma: '2.0' }]
    },
    {
        featureType: 'water',
        elementType: 'geometry',
        stylers: [{ color: "#acdcfa" }]
    }
    {
        featureType: 'all',
        elementType: 'labels',
        stylers: [{ lightness: "10" }]
    }
]

# スタイル適用
my_style = new google.maps.StyledMapType(map_style_options)
map_canvas.mapTypes.set('MyStyle', my_style)
map_canvas.setMapTypeId('MyStyle')

map_style_optionsにあるallで、ざっくりとマップの雰囲気を変えています。
saturationを下げておけば、とりあえずは、なんとなく統一感のあるマップになるかと…。
waterでは海とか川とか、水を表現している色を変えました。
最後のallでは文字関係をすこしだけ目立たなくするために、明度を上げました。
  
stylersにどんな値を入れられるかはこのページで確認しましょう。
waterとかallとか、指定できるオブジェクトのリストはこのページです。

こんな感じにグーグルマップが少しおしゃれになりました。

Screen Shot 2014-01-12 at 9.34.33 AM

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた