ViewportへGoogleMapを表示する

GoogleMapと何らかのサービスをマッシュアップして・・・といった場合にExt JS上で GoogleMapを扱ってみます。

**注意！**Ext JSのサイトにあるSamples & DemoのページにGoogleMapを表示できるPanelの サンプルがあるのですが、ここからダウンロードできるソースではGoogleMapのコントロールが表示されない 場合があります。(2009/04/21時点)

※センターポジションを緯度経度で指定した場合、コントロールが表示されない場合があります。 addControlsを実行することで回避できるようです。最新版では、解決しています。

ここでは、ext-ux-gmappanelからダウンロードした ソースでViewportにGoogleMapを表示します。

Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';

// Main application entry point
Ext.onReady(function() {
    // クイックチップスの初期化
    Ext.QuickTips.init();


    var gmap = new Ext.ux.GMapPanel({
        xtype: 'gmappanel',
        title:'Map View',
        gmapType: 'map',
        zoomLevel: 10,
        mapConfOpts: ['enableScrollWheelZoom','enableDragging'],
        mapControls: ['GLargeMapControl','GMapTypeControl','GScaleControl'],
        setCenter: {
            lat: 35.36497,
            lng: 138.72985
        },
        region: 'center'
    });

    var condPanel = new Ext.Panel({
        title : '検索条件',
		split: true,
        collapsible: true,
        height: 200,
        region: 'north'
    });
    var rootPanel = new Ext.Panel({
        title : '',
        region: 'center'
    });

    // ViewPortやPanelを配置
    new Ext.Viewport({
        layout:'border',
        items:[{
            layout: 'border',
            id: 'layout-browser',
            region:'west',
            border: false,
            split:true,
            margins: '2 0 5 5',
            width: 275,
            minSize: 100,
            maxSize: 500,
            items: [condPanel, rootPanel]
        },
            gmap
        ]
    });

});