Google Maps JavaScript API V3のスタイリングについて

Google Maps API V3のスタイリングについて（MapOptions）

今日はスタイリングについて書きます。

ガイドを読むと地図の見え方を制御する方法として

• MapOptionsで指定
• StyledMapTypeで指定

の２つの方法があると。
しかも、新しいマップとしても登録できるっぽい。

また、ガイドには色の指定などのスタイルを簡単に試すHPものってました。さすがGoogle先生

まずはガイドを参考に、制御方法１つめにあるMapOpthionを使って学校を水色っぽくしてみた。

中心座標は石川県庁で、見た目的にラベルも水色っぽくなってるのがわかるかと。

ソースはこんな感じ。

----

var blueSchoolStyles = [
  {
    featureType: "poi.school",
    stylers: [
      { saturation: 40 },
      { lightness: 30 },
      { hue: "#87ceeb" },
      { gamma: 0.8 }
    ]
  }
]
;

function initialize5() {
  var myOptions = {
    zoom: 15,
    center: new google.maps.LatLng(36.5946816, 136.6255726),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: blueSchollStyles
  }
  var map = new google.maps.Map(document.getElementById("map_canvas5"),
      myOptions);

}
google.maps.event.addDomListener(window, 'load', initialize5);

----

今回の今回のサンプルはmyOptions内に「styles:」として登録していますが、ガイドの中にあるように後から設定もできる。
ソース的には「var map = new google.maps」の下に「map.setOptions({styles: blueSchoolStyles});」を追加。