Ext JSでGoogleマップを表示するチュートリアル (3/4)

2009年08月03日　10時21分更新

文●古籏一浩

ツイートする

ウィンドウ内にGoogleマップを表示する

　ウィンドウを表示する方法が分かったので、いよいよウィンドウ内にGoogleマップを表示してみましょう。GoogleマップのAPIの使い方はバージョンによって異なりますが、ここでは最新のver 3を前提に説明します。

　Googleマップは、ウィンドウ内にdivタグ（コンテナ）を出力して、その中に表示します。方法は、通常のWebページにGoogleマップを表示する場合とほとんど同じですが、出力するdivタグはウィンドウのプロパティとして記述します。具体的には、以下のように指定します。


items: {
        html : '<div id="map_canvas" style="width:100%;height:100%"></div>'
    }

　次に、作成したコンテナにGoogleマップを表示するためのスクリプトを書きます。詳しくは本連載の第1回目でも解説していますので、ここではExt JSで表示する際のポイントを説明します。

　Googleマップはnew google.maps.Map()で表示し、最初の引数に表示先のdivタグ（コンテナ）を指定します。通常のJavaScriptではdocument.getElementById()を使って指定しますが、Ext JSではもっと手軽にExt.getDom()と指定できます。つまり、以下のコードはまったく同じ動作になります。

●通常のJavaScriptの書き方


new google.maps.Map(document.getElementById('map_canvas'), 〜)

●Ext JSの書き方


new google.maps.Map(Ext.getDom('map_canvas'), 〜)

　最後に、Googleマップのオプションを指定します。今回はExt JSのウィンドウ内により広くマップを表示させたいので、mapTypeControlにfalseを指定し、地図の種類を選択するボタンを非表示にします。また、Ext JSのウィンドウがユーザーによってリサイズされた際に、自動的に地図のサイズも変更されるように、noResizeにtrueを設定します。

　ウィンドウとGoogleマップを組み合わせたものがサンプル03です。ページが読み込まれるとExt JSのウィンドウが表示され、ウィンドウ内にGoogleマップが表示されます。ウィンドウはマウスで自由に移動させたり、リサイズしたりできます（場合によってはリサイズ時に地図が正常に描画されないこともありますが、地図をドラッグすれば正しく再描画されます）。

ウィンドウ内にGoogleマップが表示されます

●サンプル03のソースコード


<!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>'
                    }
                });
                win.show();
                // グーグルマップ ver 3の表示
                var myPos = new google.maps.LatLng(36, 137);    // 地図の中央座標
                var 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);   // 現在地をマップの中心座標に設定
            });
        // --></script>
    </head>
    <body>
        <h1>Ext JSウィンドウ+マップサンプル</h1>
        <p>ページが読み込まれるとウィンドウ内に地図が表示されます。</p>
    </body>
</html>