１年ほど前の話になりますが、Google Maps API V3 が正式な JavaScript API になり、
JavaScriptAPIで描画されたGoogleMaps上の任意の要素の色味を調整出来るようになりました。
Google Maps API for Flashの方も色味の調整が可能になっていたので紹介です。

上の画像は、先日制作させていただいた、PUMA SOCIAL(http://social.puma.jp/)というサイトのNEON MAPというコンテンツで、全国のプレイスポット（ビリヤード場とかダーツとか）や、サイトにログインしているユーザーの位置情報をプロットした地図コンテンツです。

GoogleMapsにスタイルを適用することで地図全体の彩度を落とし、
サイト全体のデザイン馴染むようにしています。



細かい説明は、本家のドキュメントを見てもらった方がよいと思うので
ここでは、地図にスタイルを適用するためのざっくりとした設定方法を。

海は0xff0000！みたいにRGBで色を指定できるわけではなく、
基本的に、元の色に対して明度、彩度、色相、ガンマ値などのパラメータを指定して、
色味を調整していく感じになります。



ソースはこんな感じ。

var map:Map = new Map();

var originalStyles:Array = [
	new MapTypeStyle(
		MapTypeStyleFeatureType.ALL,
		MapTypeStyleElementType.ALL,
		[
			MapTypeStyleRule.invert_lightness(true),
			MapTypeStyleRule.saturation(-96),
			MapTypeStyleRule.gamma(0.3),
			MapTypeStyleRule.lightness(-7)
		]
	)
	,
	new MapTypeStyle(
		MapTypeStyleFeatureType.ADMINISTRATIVE,
		MapTypeStyleElementType.LABELS,
		[
			MapTypeStyleRule.visibility("off")
		]
	)
	, // ・・・,
	new MapTypeStyle(
		MapTypeStyleFeatureType.WATER,
		MapTypeStyleElementType.LABELS,
		[
			MapTypeStyleRule.visibility("off")
		]
	)
];

var styledMapType:StyledMapType = new StyledMapType(originalStyles);

var myMapOptions:MapOptions = new MapOptions();

myMapOptions.mapTypes = [ styledMapType ];
myMapOptions.mapType = styledMapType;

map.setInitOptions(myMapOptions);

addChild(map);

ざっくり説明すると、

・どの要素（全体、道、海など）の
・どの部分（地名、地形、全体など）を
・どういう風に変えるか

をセットにしたスタイル（MapTypeStyle）の配列を地図に適用していく感じです。



やってみるとわかるんですが、明度などを数値で指定して
色を調整していくのは非常に難しいです。

そこで役に立つのがJavaScriptAPIの方で用意されている
GUIで色の変化を見ながらパラメータを調整できるコンテンツ。
パラメータをいじりながらリアルタイムで色見を確認できるのでとても便利です。

ここで設定できる変数名はJavaScriptAPI用なので、
Flashで使用されているものとは微妙に違っているんですが、
非常に似ているので参考になるかと。



また、GoogleMapsAPI for Flashでは色を変えるだけはなく
こちらのデモのように斜め上から鳥瞰するような機能もあったりするので
いろいろ遊んでみると楽しいと思います。ではでは。