Googleマップと組み合わせて完成
ここまでのスクリプトと、前回作成したGoogleマップを表示するスクリプトを組み合わせましょう。サンプル03と異なるのは、メニュー項目が選択された時に呼び出されるmenuProc関数の中身です。アラートダイアログで地図の種類を表示する代わりに、Googleマップの種類を変更するgmap.set_mapTypeId()メソッドを呼び出します。パラメーターには表示したい地図の種類を指定します。
以上で完成です。実際のソースコード全文はサンプル04を参照してください。
メニューを選択するとウィンドウ内に表示されたGoogleマップの種類が変更されます
●サンプル04のソースコード
<!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>
メニューバーにメニュー項目を追加したい場合は、tbar配列に要素としてメニュー項目に必要なオプションを設定します。試しにズームメニューを追加したものが、サンプル05です。処理の内容自体はこれまで説明してきたことと同じですので、ソースコードを見れば理解できると思います。サンプル05のソースコード全文は次ページに掲載していますので参考にしてください。
次回はExt JS入門の最後として、Ext JSの特徴的な機能である「グリッド」を扱います。お楽しみに。
■Amazon.co.jpで購入
Ｅｘｔ ＪＳ入門―リッチＵＩなＷｅｂサイトをつくるＡｊａｘフレームワーク古籏 一浩、石丸 健太郎(著)秀和システム
