新しい外観のGoogle Mapsを表示する #JavaScript

Google I/O 2013で発表のあった新しい外観の地図を表示する方法になります。新UIの方は招待リクエストを送って待つ必要がありますが、新しい地図のデザインだけなら以下のコードで確認できます。

test.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="UTF-8">
<title>Google Maps デザイン切り替え</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function onload() {
    google.maps.visualRefresh=true;
    var initLatlng = new google.maps.LatLng(35.680934,139.766908);
    initialize(initLatlng,14,'roadmap');
}
function initialize(initLatlng,zoomNo,maptype) {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: initLatlng,
        zoom: zoomNo,
        mapTypeId: maptype
    });
    createButton(map);
}
function createButton(map) {
    var buttonDiv=document.createElement('div');
    var visual=document.createElement('input');
    visual.type="button";
    if(google.maps.visualRefresh) {
        visual.value="旧デザイン";
    } else {
        visual.value="新デザイン";
    }
    visual.onclick=function() {
        google.maps.visualRefresh=!google.maps.visualRefresh;
        initialize(map.center,map.zoom,map.mapTypeId);
    };
    buttonDiv.appendChild(visual);
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(buttonDiv);
}
google.maps.event.addDomListener(window, 'load', onload);
</script>
</head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

参考情報：https://developers.google.com/maps/documentation/javascript/examples/map-simple-refresh