ExtJSを使ってGoogle Mapを表示してみる。

ExtJSを使ってGoogle Mapを表示してみる。

GeoExtのVersionが2に上がったと思って、exampleをポチポチと修正していたら、 なんとα版でしたとさ。
なんてこったい!!
と言うわけで、GeoExt1.1に戻っています。

GeoExtを動かすには、Javascript libraryのExtJSが必要になります。そうゆう仕様です。
ExtJSとは、ExtJSの開発元をみたり、ネットで調べください。ExtJSすばらしいですよね。これ一本あれば、何にもいらない。jQueryは軽い分、いろいろと拡張するにはpluginが必要ですけど。

ExtJSのexampleのwindowにgmapのサンプルがあるのですが、これGooglmaps API V2なので、ちょっとAPIをV3にして、それからちょこっと手を加えてみました。

元ネタは、Ext JSでGoogleマップを表示するチュートリアルで公開されている内容です。

開発環境は、Windows 7 32bit,Aptana Studio 3.4
Firefox 20.0とGoogle Chromeで確認しました。

必要なJavaScript

GeoExt1.1でも使うため、ExtJS3からversion3.4.1.1をdownloadして、適当なunzipします。 とりあえずDesktopでも大丈夫です。
くれぐれもExtJS4をdownloadしないように。

また、ExtJSの使い方は、

などなどを参考にしてくださいね。

私のAptana のフォルダー構成は、
blog.godo-tys.jp_wp-content_gallery_extjs3_googlemap_image01.jpg

な感じです。

Google Mapを表示してみる。

3パターンほど作成しみました。

ボタンをクリックしたらWindow表示

ボタンを押したら、Googlemapがmodal Windowが開くようにしてみます。

HTML5として宣言してます。
codeは、

必要なjsとcssを読み込んで、mapwin,gmapのオブジェクトを作成して、showするというごく簡単なものです。

<!DOCTYPE HTML>
<html lang="ja">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<title>Google map Sample</title>
		<link rel="stylesheet" href="ext-3.4.1/resources/css/ext-all.css" type="text/css" media="all">
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=false"></script>
		<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
		<script type="text/javascript">
 
		Ext.BLANK_IMAGE_URL = "ext-3.4.1/resources/images/default/s.gif";
 
		Ext.onReady(function(){
			var gmap;
			var mapwin;
			var button = Ext.get('show-btn');
 
			button.on('click', function(){
				if(mapwin){
					mapwin.show();
				} else {
					mapwin = new Ext.Window({
						title: 'Googleマップ ver 3の表示サンプル',
                		closeAction: 'hide',
						width: 520,
						height: 480,
						layout: 'fit',
                   		items: {
                        	html : '<div id="map_canvas" style="width:100%;height:100%"></div>'
                   		}
					});
					mapwin.show();
					// Googleマップ ver 3の表示
					var myPos = new google.maps.LatLng(35.4, 139.4);    // 地図の中央座標
					var opts = {
						zoom : 9, // ズームレベル
						center : myPos,   // 地図の中央座標
						mapTypeId : google.maps.MapTypeId.ROADMAP,  // 地図の種類(通常の地図)
						mapTypeControl : true,   // コントローラーは表示する
						scaleControl: true
					};
					gmap = new google.maps.Map(Ext.getDom('map_canvas'), opts);
				}
				mapwin.show();
			})
		})
		</script>
	</head>
	<body>
		<h1>Ext JS 3.4でGoogle Map</h1>
		<p>ボタンをクリックするとWindowが開いて、Google Mapを表示します。</p>
		<input type="button" id="show-btn" value="Google Map表示" />
	</body>
</html>

codeの中で、

Ext.BLANK_IMAGE_URL = "ext-3.4.1/resources/images/default/s.gif"

は、引用「Ext JSには1つ約束事があります。Ext JSでは、レイアウト位置を調整するために透明のGIFファイル(ブランク画像)を利用しています。デフォルトの状態ではこのGIF画像をExt JSのサーバーから読み込むため、表示速度が遅くなる場合があります。

 そこで、Ext JS本体と同じサーバーから画像を読み込むように設定しましょう。画像ファイルのURLは、以下のように Ext.BLANK_IMAGE_URL で指定します。」だそうです。

保存後、FireFoxで実行させると、
blog.godo-tys.jp_wp-content_gallery_extjs3_googlemap_image02.jpg

と表示されすので、ボタンをクリックすると、
blog.godo-tys.jp_wp-content_gallery_extjs3_googlemap_image03.jpg

な感じで、Google mapが表示されます。Good Job!!ですね。
windowのタイトルをドラッグすると、windowの位置を変えることができます。
いや~~、やっぱExtJSはええよ。

Firefoxで実行後に自動的にWindow表示(1)

実行後に自動的にGooglemapがmodal Windowが開くようにしてみます。

HTML5として宣言してます。
codeは、

必要なjsとcssを読み込んで、mapwin,gmapのオブジェクトを作成して、showするというごく簡単なものです。
おまけに、toolbarを定義して、Google Mapの表示方法を変えています。
toolbarの定義は、tbar : []の部分です。

<!DOCTYPE HTML>
<html lang="ja">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<title>Sample</title>
		<link rel="stylesheet" href="ext-3.4.1/resources/css/ext-all.css" type="text/css" media="all">
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=false"></script>
        <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
		<script type="text/javascript">
			Ext.BLANK_IMAGE_URL = "ext-3.4.1/resources/images/default/s.gif";
 
       		var gmap;
 
        	Ext.onReady(function(){
                var mapwin = new Ext.Window({
                    title: 'Googleマップ ver 3の表示サンプル',
                    width: 520,
                    height: 480,
                    layout: 'fit',
                    items: {
                            html : '<div id="map_canvas" style="width:100%;height:100%"></div>'
                    },
                    tbar : [
                            { xtype : 'splitbutton',
                                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 }
                                ]
                            }
                    ]
                });
                mapwin.show();
                // Googleマップ ver 3の表示
                var myPos = new google.maps.LatLng(35.4, 139.4);    // 地図の中央座標
                var opts = {
                    zoom : 9, // ズームレベル
                    center : myPos,   // 地図の中央座標
                    mapTypeId : google.maps.MapTypeId.ROADMAP,  // 地図の種類(通常の地図)
                    mapTypeControl : false,   // コントローラーは表示しない
                    scaleControl: true
      			};
 
                gmap = new google.maps.Map(Ext.getDom('map_canvas'), opts);
            });
            function menuProc(obj){
                //Ext.Msg.alert('形式', obj.mapType);
                gmap.setMapTypeId(obj.mapType);
            }
		</script>
	</head>
	<body>
		<h1>Google Map Window</h1>
		<p>
			ページが読み込まれるとウィンドウ内にメニューが表示されます。
		</p>
		<br />
	</body>
</html>

保存後、FireFoxで実行させると、
blog.godo-tys.jp_wp-content_gallery_extjs3_googlemap_image04.jpg

な感じで、Google mapが表示されます。Good Job!!ですね。
windowのタイトルをドラッグすると、windowの位置を変えることができます。

codeを眺めていると何となく理解できるかと思います。
json形式で、パラメータを指定するので、私にとっては何となく理解できます。

Firefoxで実行後に自動的にWindow表示(2)

実行後に自動的にGooglemapがmodal Windowが開くようにしてみます。(1)ではtoolbarをtopにしましたが、bottomにも同じように設定義できます。

HTML5として宣言してます。
codeは、

必要なjsとcssを読み込んで、mapwin,gmapのオブジェクトを作成して、showするというごく簡単なものです。
おまけに、toolbarを定義して、Google Mapの表示方法を変えています。
toolbarのtopの定義は、tbar : []の部分です。
toolbarのbottomの定義は、bbar : []の部分です。

<!DOCTYPE HTML>
<html lang="ja">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<title>Sample</title>
		<link rel="stylesheet" href="ext-3.4.1/resources/css/ext-all.css" type="text/css" media="all">
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=false"></script>
		<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
		<script type="text/javascript">
 
		Ext.BLANK_IMAGE_URL = "ext-3.4.1/resources/images/default/s.gif";
 
		Ext.onReady(function(){
 
 			var gmap;
			var mapwin;
			var button = Ext.get('show-btn');
 
			button.on('click', function(){
				if(mapwin){
					mapwin.show();
				} else {
					mapwin = new Ext.Window({
						title: 'Googleマップ ver 3の表示サンプル',
                		closeAction: 'hide',
						width: 520,
						height: 480,
						layout: 'fit',
                   		items: {
                        	html : '<div id="map_canvas" style="width:100%;height:100%"></div>'
                   		},
                   		tbar : [
                            { xtype : 'splitbutton',
                                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 }
                                ]
                            }
                    	],
                    	bbar : [
							{	xtype : 'tbbutton', text : 'ビューアーについて...', handler : aboutGMapViewer },
							'-',
							{	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 }
                                ]
							}
						]
					});
					mapwin.show();
					// Googleマップ ver 3の表示
					var myPos = new google.maps.LatLng(35.4, 139.4);    // 地図の中央座標
					var opts = {
						zoom : 9, // ズームレベル
						center : myPos,   // 地図の中央座標
						mapTypeId : google.maps.MapTypeId.ROADMAP,  // 地図の種類(通常の地図)
						mapTypeControl : false,   // コントローラーは表示しない
						scaleControl: true
					};
					gmap = new google.maps.Map(Ext.getDom('map_canvas'), opts);
				}
				mapwin.show();
			});
 
	        function menuProc(obj){
	            //Ext.Msg.alert('形式', obj.mapType);
	            gmap.setMapTypeId(obj.mapType);
	        }
   			function aboutGMapViewer(){
				Ext.Msg.alert('このソフトについて', 'Google Map API Version3を使ったMapViewです。<br>&copy;2013 TYS.');
			}
 
		})
 
 
		</script>
	</head>
	<body>
		<h1>Ext JSウィンドウ</h1>
		<p>ボタンをクリックするとWindowが開いて、Google Mapを表示します。</p>
		<input type="button" id="show-btn" value="Google Map表示" />
	</body>
</html>

保存後、FireFoxで実行させて、ボタンをクリックすると、
blog.godo-tys.jp_wp-content_gallery_extjs3_googlemap_image05.jpg

また表示方法を変更するとと、
blog.godo-tys.jp_wp-content_gallery_extjs3_googlemap_image06.jpg

な感じで、Google mapが表示されます。Good Job!!ですね。
windowのタイトルをドラッグすると、windowの位置を変えることができます。おまけにtoolbarも表示されています。

いや~~、やっぱExtJSはええよ。

ExtJSのサンプルは、解凍したfolderのexample内に入っていますので、いろいろと触ってみると良いですね。 

次回はGeoExt

次回は、GeoExtのサンプルを使いながら、実際にWeb Mappingで使えるようなtutorialを始めます。
たぶん、10回くらいを予定しております。(may be…)

Web Mappingハザードマップ土石流氾濫計算のanime震災や災害時の避難場所は避難経路などいろいろな情報を地図にOverlayしてWEBで公開できます。
Open Source 万歳!!

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

WP-SpamFree by Pole Position Marketing

Social Widgets powered by AB-WebLog.com.