<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="resources/css/ext-all.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript"><!--
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Ext.onReady(function(){
var win = new Ext.Window({
title: 'Ext JSウィンドウサンプル',
width: 520,
height: 480,
layout: 'fit',
items: {
html : '<div id="map_canvas" style="width:100%;height:100%"></div>'
},
tbar : [
{ xtype : 'tbbutton',
text : '地図の種類',
menu : [
{ text : '通常の地図', mapType : google.maps.MapTypeId.ROADMAP, handler : menuProc },
{ text : '航空写真', mapType : google.maps.MapTypeId.SATELLITE, handler : menuProc },
{ text : '通常＋航空写真', mapType : google.maps.MapTypeId.HYBRID, handler : menuProc },
{ text : '地形', mapType : google.maps.MapTypeId.TERRAIN, handler : menuProc }
]
}
]
});
win.show();
// Googleマップ ver 3の表示
var myPos = new google.maps.LatLng(36, 137); // 地図の中央座標
gmap = new google.maps.Map(Ext.getDom('map_canvas'), {
zoom : 7, // ズームレベルは17（詳細地図）
center : myPos, // 地図の中央座標
mapTypeId : google.maps.MapTypeId.ROADMAP, // 地図の種類（通常の地図）
mapTypeControl : false, // コントローラーは表示しない
noResize : true // 自動リサイズチェック
});
gmap.set_center(myPos); // 現在地をマップの中心座標に設定
});
// 地図の表示形式の切り替え
function menuProc(obj){
gmap.set_mapTypeId(obj.mapType);
}
// --></script>
</head>
<body>
<h1>Ext JSウィンドウ+マップサンプル</h1>
<p>ページが読み込まれるとウィンドウ内に地図が表示されます。</p>
</body>
</html>
