FC2ブログ

GOOGLE MAPS API V3の地図の色をカスタマイズ


GOOGLE MAPS API V3で、mapstyleを変えて、
       地図の色をカスタマイズ




GOOGLE MAPS API V3の特徴の一つに、
地図の色をオリジナルに変えられるカスタマイズ機能があります。
非常に簡単なので、やってみましょう。

まずGOOGLEが用意しているウィザードがあるので、そこに行きます。
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html


map3.jpg



このような画面が出ます。
横のサムネイル画像を拡大して見える、赤い枠の中に注目!
GOOGLEのMap Styleはフォトショップのレイヤーのように、
カスタマイズしたい要素に対して一つ一つ設定を重ねます。





Feature Typeでカスタマイズする要素を選択
上からAdministrativeが行政区分 国境・県境などの色を変更したり
非表示にするならstyleを加えます。
Landscapeは人工物か、自然の風景か。
PointofInterestは、お店、銀行などの建物
Roadは、高速道路、幹線道路、一般道路を塗りわけられます。
Transitで駅と線路、Waterが川・湖・海の色です。

赤枠のFeatureTypeの隣にあるElementTypeで、
全ての要素か(All)/地理的な要素の表示を変えるか(Geometry)/その名前の表示を変えるか(Label)
選びます。


下のStylerで、表示・非表示(visibility)と
色相(fue)/明度反転(invert_lightness)/彩度(saturation)/明度(lightness)/透過度(gamma)
を変更します。


設定できたら、ElementTypeの下にあるAddStyleボタンを押します。
すると、右側のMapStyleに追加されます。


この手順を、MAPの変えたい要素ごとに繰り返して、
最後にShowJSONボタンを押します


map4.jpg
(MAPSTYLEカスタマイズ設定した例)→サンプルページへ

するとこのようなJSONが表示されます。


[
{
featureType: "water",
elementType: "geometry",
stylers: [
{ invert_lightness: true }
]
},{
featureType: "road.highway",
elementType: "all",
stylers: [
{ visibility: "on" },
{ lightness: -17 },
{ hue: "#00ff55" },
{ saturation: 33 }
]
},{
featureType: "road.arterial",
elementType: "all",
stylers: [
{ hue: "#ff8800" },
{ gamma: 0 },
{ invert_lightness: true },
{ visibility: "on" },
{ lightness: 46 },
{ saturation: 24 }
]
},{
featureType: "landscape",
elementType: "all",
stylers: [
{ hue: "#ff0000" },
{ invert_lightness: true },
{ lightness: 0 },
{ gamma: 0 },
{ saturation: -6 }
]
}
]


ここまできたら、HTMLにもどって、
head内にまず、GOOGLE MAPS API V3を呼び出すコードをいれ


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>


それから次のスクリプトをhead内に入れます。



<script type="text/javascript">
//![CDATA[
var map;
var centePost = new google.maps.LatLng(緯度,経度);//表示させる地図の中心
function initialize() {
var stylez =
[
{
featureType: "water",
elementType: "geometry",
stylers: [
{ invert_lightness: true }
]
},{
featureType: "road.highway",
elementType: "all",
stylers: [
{ visibility: "on" },
{ lightness: -17 },
{ hue: "#00ff55" },
{ saturation: 33 }
]
},{
featureType: "road.arterial",
elementType: "all",
stylers: [
{ hue: "#ff8800" },
{ gamma: 0 },
{ invert_lightness: true },
{ visibility: "on" },
{ lightness: 46 },
{ saturation: 24 }
]
},{
featureType: "landscape",
elementType: "all",
stylers: [
{ hue: "#ff0000" },
{ invert_lightness: true },
{ lightness: 0 },
{ gamma: 0 },
{ saturation: -6 }
]
}
];//作成したMapStyleを変数に格納
var mapOptions = {
zoom: 11,//地図の最初に表示される時の拡大率設定
center: centePost,//さっき設定した中心
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP,'original']//maptypeに名前を入れる
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);//ここではmap_canvasというIDのDIVに表示する設定です

var styledMapOptions = {
name: "customStyle"//マップスタイル設定の名前を設定する
}

var originalStyle = new google.maps.StyledMapType(
stylez, styledMapOptions);//JSONの設定とマップスタイルを組み合わせたものを変数に格納

map.mapTypes.set('original', originalStyle);//地図とスタイルを組み合わせる
map.setMapTypeId('original');
}

//]]
</script>


これで終了。

あとは、<body onload="initialize()">と、
ボディにオンロードイベントをつけます

テストページは こちらを参照のこと

いろいろな地図の色のカスタマイズは
http://www.41latitude.com/post/1268734799/google-styled-maps
こちらにたくさん出ているので、参考にどうぞ



スポンサーサイト



テーマ : Webサービス
ジャンル : コンピュータ

コメントの投稿

管理者にだけ表示を許可する

検索フォーム
カテゴリ
最新記事
アンケート
月別アーカイブ
お名前.com
リンク
RSSリンクの表示
google
MicroAD
ninja
忍者アド
広がるブログ
blomotion
サンプル・イベント・モニターならBloMotion
プレスブログ
[プレスブログ]価値あるブログに換金可能なポイントを差し上げます。
wadax
ブログ村
フリーエリア
人気ブログランキングへ
ブログランキングドットネット
リンクリックブログランキング
フリーエリア
FC2ブログランキング

FC2Blog Ranking

AMAZON
カラーミーショップ
ブログ広告
ブログ広告ならブログ広告.com
ぐるなび
中古DVD
QRコード
QR
SEO