Google Mapの新しいビジュアルをAPIで使用する

Google Map APIで新しい地図の外観を指定できるようになりました。

※　新ビジュアルに完全に切り替わったため、旧ビジュアルの地図は表示できなくなりました。

旧ビジュアル(現在はみれません)

Full Size

新ビジュアル

Full Size

新しいビジュアルを使いたいときはURLパラメーターに「&visual_refresh=true」つけてGoogle Map Apiライブラリを読みこみ「google.maps.visualRefresh=true」を実行します。

サンプル

<!DOCTYPE HTML>
<html>
<head>
<title>Google Maps API New visual</title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false&visual_refresh=true"></script>
<script type="text/javascript">
	function initialize() {
		google.maps.visualRefresh=true;
		var mapDiv = document.getElementById("map_canvas");
		var mapCanvas = new google.maps.Map(mapDiv, {
			center : new google.maps.LatLng(36.322356, 139.013057),
			zoom : 15,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		});
	}
	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 API New visual</title>

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

function initialize() {

google.maps.visualRefresh=true;

var mapDiv = document.getElementById("map_canvas");

var mapCanvas = new google.maps.Map(mapDiv, {

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

zoom : 15,

mapTypeId : google.maps.MapTypeId.ROADMAP

});

}

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>

サンプル

投稿者: shimizu