Google Japan Blogに「Google Maps API を使って、地図のカラーバリエーションを楽しもう」でGoogleマップの色をアレンジできたり、白地図ができることが紹介されていて、面白そうなので作ってみた。
今回はその中の後半で書かれていた「Google Maps API Styled Map Wizard」に興味をもった。
但し、このツール、IEでは使用出来ない(笑)
Google Chrome, Firefox または Safariでご利用いただけますとのこと。
さて、「Google Maps API Styled Map Wizard」で作ったGoogleマップ。
(※最後に実際に作った地図が表示されている)
・道路をピンク系に変更→Style0
・学校(school)をブルー系に変更→Style1
２つの設定を行った。
１．Style0の設定
・まず表示したい場所と縮尺を地図上に表示させる。(左列1行のGoogleMaps)
・Stylers(左列3行目)のカラーチャート、表示させたい色(ピンク)をクリックする
・Hueに自動でカラーコードが表示されチェックボタンがつく。
・Feature Type(左列2行目)で2列目一覧のリストから「Road」をクリック
・すると、道路だけが設定したカラーになる。
・必要に応じて3列目のHighway、Arterial、Localをクリックすることで高速道路だけなどの設定もできる。
またElement TypeのラジオボタンをLabelを選択すると、159号などのマークのみにカラーが設定される。実際、いろいろ変更してみて確認するのがいちばんてっとり早い。
２．Style1の設定
・Feature Typeに別の設定をしたいときは、Styleを追加する。
・上記の図、赤丸の「Add Style」ボタンをクリックすると、右カラムにスタイルが追加される。
・Feature Typeから「Point of internet」→「school」を選択（①)
・Hueでカラーバーから青部分をクリック(②)
・決定した色のトーンを変更したい場合は、右横の3つのバーを動かすことで変更ができる。(③)
・設定が完了したら、青矢印の「Show JSON」をクリックすると、設定したコード、Google Maps APIが表示される。
・このコードをコピーして、通常のマップ表示するコードに追加する。
・赤矢印の×をクリックすると、コードが閉じられ、ウィザード設定画面に元に戻る。
実際、このコードを追加しただけでは簡単に表示されなかった。
Google Maps JavaScript API V3 Overlaysの
Stylersのサンプルコードを元にアレンジした。
基本的な変更部分は、
・LatLngの部分を自分が表示させたい数値に変更、zoomで拡大率を調整。
・var stylez = 以降に、Google Maps API Styled Map Wizardで設定したコードを設定。
・body部分で、表示したい地図のpxを設定することで表示される。
作った地図は、以下のGoogleマップ(金沢市の道路と学校)↓
このマップのソース
------------------------
1: <html>
2: <head>
3: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
4: <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
5: <title>Google Maps API Styled Map Wizardで作ったサンプルマップ </title>
6: <script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
7: <script type="text/javascript">
8: function initialize() {
9: var stylez = [{
10: featureType: "road",
11: elementType: "all",
12: stylers: [
13: { hue: "#ff0088" }
14: ]
15: },{
16: featureType: "poi.school",
17: elementType: "all",
18: stylers: [
19: { hue: "#0008ff" },
20: { saturation: 19 },
21: { lightness: -18 }
22: ]
23: }];
24: var myOptions = {
25: zoom: 12,
26: center: new google.maps.LatLng(36.559842397523944,136.65653228759766),
27: }
28: var map = new google.maps.Map(document.getElementById("map_canvas"),
29: myOptions);
30:
31: var styledMapOptions = {
32: map: map,
33: name: "Hip-Hop"
34: }
35: var jayzMapType = new google.maps.StyledMapType(stylez,styledMapOptions);
36:
37: map.mapTypes.set('hiphop', jayzMapType);
38: map.setMapTypeId('hiphop');
39: }
40: </script>
41: </head>
42: <body style="margin:0px; padding:0px;" onload="initialize()">
43: <div id="map_canvas" style="width:450px; height:450px"></div>
44: </body>
45: </html>
------------------------
Google Maps API Styled Map Wizardの感想
・直感的に使えるツールとしてとても優れている！
・Feature TypeのConstantがもう少し詳細に分類されていると応用が効いて、これを利用したアイデアがもう少し広がってくるのでは？具体的には、poi.businessの部分、細分化したカテゴリ選択に分かれて欲しい。
・変更した部分だけのコードが表示されるが、この際、ウィザードで表示されているGoogleマップすべてのコードが表示されるようになると、もっといろいろなアイデアが生まれてくると思われる。
なにせ、APIのドキュメントは英語のままで日本語化されていないのが、大きな障害である。このAPI関連の日本語化サービスは今後も難しいのだろうか・・・。
ここが日本をガラパゴス化する所以でもあるのでは(笑)(→こんなことを思うのは英語ができない私だけかしら^^;)
Google Maps API Styled Map Wizardの今後のバージョンアップを期待したい！！
