GoogleMapAPIでイケてる地図を作る | 電脳備忘録

代官山蔦谷のgoogleMapってイケてるよね？あれどうやって実装しているんだろう？って話になって、「Youこれ実装しちゃいなよ」という流れになったのでgoolgeさんに聞いてみました。どうやらgooglemapAPI ver3から実装されたStyledMapTypeというAPIを使うことで実装できるようです。

GoogleMapAPIってver2のときに少し使ったことがある程度なんですよね。その時はxmlの情報をマップにプロットさせるってことをやってましたが...。今回は下記のエントリーを参考にテストしてみました。結構細かく設定できるんですね。

Google Maps JavaScript API V3 チュートリアル
 イラストマップみたいなGoogleマップをGoogle Maps API V3で！
Google Maps JavaScript API V3 のマップタイプ
 Google Mapのデザインを変更する方法（StyledMapの使い方）

ソースはこんな感じ

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(35.689901, 139.6982);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var m_latlng = new google.maps.LatLng(35.689901, 139.6982);
var marker = new google.maps.Marker({
position: m_latlng,
map: map
});
var styleOptions = [{
featureType:"transit.station",stylers:[{visibility: "off"}]
}, {
//省略
}, {
featureType: "poi",stylers: [{ visibility: "off" }]
}
];
var lopanType = new google.maps.StyledMapType(styleOptions);
map.mapTypes.set('noText', lopanType);
map.setMapTypeId('noText');
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

以下私的備忘録

PC向けなのでsensorはfalse、モバイル機器向けに位置情報を使うときはtrue

<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
</code></pre>
地図の中心を新宿西口の高速バス乗り場に設定
<textarea name="code" class="js">
var latlng = new google.maps.LatLng(35.689901, 139.6982);
</code></pre>
新宿西口の高速バス乗り場にピンを立てる
<textarea name="code" class="js">
var m_latlng = new google.maps.LatLng(35.689901, 139.6982);
</code></pre>
var styleOptionsで表示方法というかスタイルを指定する。
<textarea name="code" class="js">
var styleOptions = [{
featureType:"transit.station",stylers:[{visibility: "off"}]
}, {
//省略
}, {
featureType: "landscape",stylers: [{ saturation: -100 },{ lightness: -6 }]
}
];

var styleOptionsで指定したスタイルを読み込む

var lopanType = new google.maps.StyledMapType(styleOptions);

地図上の文字を表示させない

map.mapTypes.set('noText', lopanType);
map.setMapTypeId('noText');

さらっと調べて適当に実装したからおかしな箇所もあるかもしれませんが、とりあえず表示はできています。クールでイケてる地図になったかしら？
次はレイヤーをかぶせる作業だけどこれはハマりそうだなぁ...。