昨今のGoogleMapはすごいんですね。地図上の要素に対して色が設定できたりするんですね。たとえば白地図みたいにしたり、白地図の中の特定の建造物にのみ色をつけたり、なんてことも自由自在。
まずは下の地図をごらんくださいませ。
これは、東京の地図のベース色を少し変えて、公園に緑色をつけたものです。
こうしてみると割と広い公園あるんだなあ・・・という感じです。
さて、具体的な設置の方法ですが、なんとV3からはAPIキーがいらなくなりました。
ちょっと面倒だったので大変助かります。
コードは以下の通りです。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var stylez = [
{
stylers: [
{ lightness: 32 },
{ gamma: 1.91 },
{ visibility: "simplified" },
{ saturation: -39 },
{ hue: "#ff0000" }
]
},{
featureType: "poi.park",
stylers: [
{ visibility: "simplified" },
{ hue: "#00ff33" },
{ lightness: -49 },
{ saturation: 98 },
{ gamma: 0.57 }
]
}
];
var latlng = new google.maps.LatLng(35.709897,139.81081);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var styledMapOptions = {
}
var setMapType = new google.maps.StyledMapType(stylez,styledMapOptions);
map.mapTypes.set('park', setMapType);
map.setMapTypeId('park');
}
</script>
1行
api呼んでます。
sensorの値は、設置するだけならfalseでOKです。
3行
全体をfunction化しています。
4行
var stylezから始まっている、スタイルを定義してるらしきあたり。これ、本家が用意したウィザード式のジェネレータがあります。
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
こちらを適当にいじればなんとなーく色々と加工できます。
一通りいい感じなったなーと思ったら、画面右にあるメニューの下にあるshow JSONをクリックすると、このstylezとして定義する値の一群が取得できるので、それをそのままこんな感じでコピペすればOKです。
24行
緯度経度を定義しています。変数は任意のもので、書式はそのまま使います。
自分が求める緯度経度は、ネット上の様々なサイトでうまいこと取得できます。
たとえばこんなところとか。
それを括弧の中の値らしきところにべたーーっと。
25行
var myOptionsからの記述には諸々の地図のオプションを設定します。割と見たまんまです。
centerに割り当ててる変数は、上で緯度経度を定義した変数です。要は指定した緯度経度の地点を中心にしろ、って定義ですね。
30行
var mapから始まる記述で実際にmapを書き出します。括弧の中に指定するIDは、あらかじめbody内に用意しておきます。今回ヘッダの中では’map_canvas’としているので、body内で以下のような空divを用意しました。
<div id="map_canvas" style="width: 500px; height: 500px"></div>
32行
で、ここまででマップ自体は設置完了なのですが、先に定義したスタイルを当てているのがこの行以下の部分
ほぼそのまま書くだけでOKです。’park’と定義した部分は、任意の名前で37行目と38行目の記述がそろっていればOK。
関数呼び出し
定義した関数を、onloadのタイミングで呼んでやる必要があります。
window.onload = function() {
initialize();
};
取り急ぎ設置できればいいやレベルで書きましたが、おそらくカスタマイズの幅はもっと恐ろしく広いはずです。ポインターアイコンなんかも、自分のサーバにおいた画像に自由に変えられるみたい。
とりあえずはその辺はまた機会に。