« 「今年は本気でPDCA」アクセス解析サミット2010に参加、PDCAによるウェブ最適化に取り組もう | メイン | 6月1日の日の入りは19:06、今日はじっくり夕焼け鑑賞しました »

TOP> Webをカスタマイズ

Google Maps API Styled Map WizardでGoogle Maps APIの地図をカラーアレンジしてみました

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

2つの設定を行った。

1.Style0の設定

mapwizard01.jpg

 ・まず表示したい場所と縮尺を地図上に表示させる。(左列1行のGoogleMaps)

 ・Stylers(左列3行目)のカラーチャート、表示させたい色(ピンク)をクリックする

 ・Hueに自動でカラーコードが表示されチェックボタンがつく。


mapwizard02.jpg

 ・Feature Type(左列2行目)で2列目一覧のリストから「Road」をクリック

 ・すると、道路だけが設定したカラーになる。

 ・必要に応じて3列目のHighway、Arterial、Localをクリックすることで高速道路だけなどの設定もできる。
  またElement TypeのラジオボタンをLabelを選択すると、159号などのマークのみにカラーが設定される。実際、いろいろ変更してみて確認するのがいちばんてっとり早い。

2.Style1の設定

mapwizard03.jpg

 ・Feature Typeに別の設定をしたいときは、Styleを追加する。

 ・上記の図、赤丸の「Add Style」ボタンをクリックすると、右カラムにスタイルが追加される。

 ・Feature Typeから「Point of internet」→「school」を選択(①)

 ・Hueでカラーバーから青部分をクリック(②)

 ・決定した色のトーンを変更したい場合は、右横の3つのバーを動かすことで変更ができる。(③)

 ・設定が完了したら、青矢印の「Show JSON」をクリックすると、設定したコード、Google Maps APIが表示される。

mapwizard04.jpg

・このコードをコピーして、通常のマップ表示するコードに追加する。

・赤矢印の×をクリックすると、コードが閉じられ、ウィザード設定画面に元に戻る。

実際、このコードを追加しただけでは簡単に表示されなかった。

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の今後のバージョンアップを期待したい!!

関連記事:Googleマップ、Google Maps API V3でアクセスマップを作ってみました(タスクマザー)

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

トラックバック

このエントリーのトラックバックURL:
https://www.taskmother.jp/cgi-bin/taskmt/mt-tb.cgi/255