Google Map api　その２　グーグルマップのデザインを変えてみる

DEMO
どうもこんばんは、前回に引き続きGoogle Map apiについてもう少し。今回はマップのデザインを変えるという話です。グレースケールのマップにしてみたり、赤青黄色のマップにしてみたり、かなり自由にデザイン変更が行えます。

このデザイン変更はMapTypeStylerにて行うことができます。

使用方法は至って簡単かつ感覚的に行えます。
変更項目に関する説明をしておきます。
　

設定値	概要
Selecter	編集、変更したいパーツを選択します。マップの全部を変更する”all”〜細かいパーツ（例えば学校のみ）まで選択することができます。
Element type	選択したパーツの編集、変更する範囲を選択します。すべて/パス（線系）/ラベル系で選択します。
Visibility	表示/シンプル表示/非表示の選択が行えます
Inver lightness	明度の反転
Hue	メイン色の選択
Saturation	色の濃さ
Lightness	明るさ
Gamma	ガンマ値

　
基本的な編集の流れは　変更したいパーツ選び　⇒　変更　⇒　Map Styleに登録　⇒　重ねて更に変更したパーツを選択　⇒　変更　…　という流れになります。
　
この編集ができましたら「show JSON」というボタンからコードを取得し
google map のスクリプト内にコピー＆ペーストして半ば完成です。
　
コードは以下のようになりますがこのコードを単純にペーストしても動きません。
詳しくはデモかGoogle Maps API Version3 日本語ドキュメント(非公式)をご確認ください。

Map Styleの例

[
  {
    stylers: [
      { hue: "#0008ff" },
      { saturation: 65 }
    ]
  },{
    featureType: "poi",
    stylers: [
      { visibility: "off" },
      { hue: "#00e5ff" },
      { saturation: 42 },
      { lightness: -25 }
    ]
  },{
    elementType: "geometry",
    stylers: [
      { hue: "#00ff55" }
    ]
  }
]

　
デモのコード

<title>google map api test</title>
var map;
var cent = new google.maps.LatLng(40.740494,-73.99704);
var MY_MAPTYPE_ID = ‘cool’;
function initialize() {
  var stylez = [
    {
      featureType: "all",
      elementType: "all",
      stylers: [
{ visibility: "simplified" },
      { hue: "#ff4d00" },
      { saturation: -100 },
      { invert_lightness: true }
      ]
    },
    {
      featureType: "all",
      elementType: "labels",
      stylers: [
       { visibility: "off" }
      ]
    }
  ];
  var mapOptions = {
    zoom: 12,
    center: cent,
    mapTypeControlOptions: {
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
  var styledMapOptions = {
    name: "type2"
  };
  var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
  map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
 var markerOpts = {
        position: new google.maps.LatLng(40.740494,-73.99704),
        map: map,
        title: "marker test",
		icon:"images/pinB2.png"
      };
var marker = new google.maps.Marker(markerOpts);
var infowin = new google.maps.InfoWindow({content:"test"});
google.maps.event.addListener(marker, ‘mouseover’, function(){infowin.open(map, marker);});
google.maps.event.addListener(marker, ‘mouseout’, function(){infowin.close();});
}
  <div style="width: 100%;height: 100%"></div>