Google Mapを使って水彩画風／モノクロームの地図を表示する

クリエイティブ・コモンズライセンスで配布されているマップタイルを使用して水彩画風の地図を表示します。

Google Map API以外のOpenLayersやLeafletなどの地図表示ライブラリでも使用することができます。

DEMO

水彩画風

Full Size

モノクロ

Full Size

サンプルコード

Google Map APIでの水彩画風地図表示サンプル

<!DOCTYPE HTML>
<html>
<head>
<title>Google Maps モノクロ</title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.1"></script>
<script type="text/javascript">
	function initialize() {
            var layer = "watercolor"; //レイヤー指定　watercolor:水彩画風、toner:モノクロ
            var map = new google.maps.Map(document.getElementById("map_canvas"), {
                center: new google.maps.LatLng(36.322356, 139.013057),
                zoom: 5,
                mapTypeId: layer,
                mapTypeControlOptions: {
                    mapTypeIds: [layer]
                }
            });
            map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
	}
        

	google.maps.event.addDomListener(window, "load", initialize);
</script>
<style type="text/css">
html, body{
    margin: 0px;
    padding: 0px;
}
html, body, #map_canvas {
	width: 100%;
	height: 100%;
}
</style>
</head>
<body>
	<div id="map_canvas"></div>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Google Maps モノクロ</title>

src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

function initialize() {

var layer = "watercolor"; //レイヤー指定　watercolor:水彩画風、toner:モノクロ

var map = new google.maps.Map(document.getElementById("map_canvas"), {

center: new google.maps.LatLng(36.322356, 139.013057),

zoom: 5,

mapTypeId: layer,

mapTypeControlOptions: {

mapTypeIds: [layer]

}

});

map.mapTypes.set(layer, new google.maps.StamenMapType(layer));

}

google.maps.event.addDomListener(window, "load", initialize);

</script>

html, body{

margin: 0px;

padding: 0px;

}

html, body, #map_canvas {

width: 100%;

height: 100%;

}

</style>

</head>

<body>

</body>

</html>

DEMO

サンプルコード

投稿者: shimizu