Googleマップ - 初心者のためのExtJS入門

今回はExtJSからGoogleマップを表示してみます。

classicでの使い方

classicでは、Ext.ux.GMapPanelを使います(http://docs.sencha.com/extjs/6.5.1/classic/Ext.ux.GMapPanel.html)。

まずは、をロードしておきます。これはindex.htmlか、Ext.Loader.loadScriptで読み込んでおけば良いでしょう。

そのうえで、下記のようになります。

Ext.define('Sample.view.map.Panel', {
    extend: 'Ext.ux.GMapPanel',
    xtype: 'map_panel',

    gmapType: 'map',

    center: {
        geoCodeAddr: "鹿児島県庁",
        marker: {
            title: '鹿児島県庁'
        }
    },

    mapOptions: {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
});

f:id:sham-memo:20170909192215p:plain

ドキュメントには定義されていませんが、centerコンフィグには中心位置に関する情報を指定します。

markersコンフィグでマーカーは複数設定できます。

マーカーの追加にはaddMakerメソッド(戻り値はgoogle.maps.Marker)が用意されているようですが、削除は自力でGoogle Map APIを呼ぶ必要があるようです。

modernでの使い方

modernでは、Ext.ux.google.Mapを使います(http://docs.sencha.com/extjs/6.5.1/modern/Ext.ux.google.Map.html)。

Google Map APIの使い方をあえてclassicに合わせると、まずapp.jsonにマッシュアップの設定を追加します。

app.json

"mashup": {
    "map": {
        "options": "?v=3&sensor=false"
    }
}

Ext.ux.google.Mapは、下記のような定義があり、app.jsonのoptionsの値を設定したリクエストでGoogle Map APIを利用します。

requiredScripts: [
    '//maps.googleapis.com/maps/api/js{options}'
]

あとは下記のようになります。

/**
 * マップパネルクラス。
 *
 * @class Sample.view.map.Panel
 * @extend Ext.Panel
 */
Ext.define('Sample.view.map.Panel', {
    extend: 'Ext.Panel',
    xtype: 'map_panel',

    requires: [
        'Ext.ux.google.Map'
    ],

    layout: 'fit',

    items: {
        xtype: 'map',
        useCurrentLocation: false,
        mapOptions: {
            zoom: 16,
            center: {
                lat: 31.560236,
                lng: 130.557855
            }
        },
        markers: [
            {
                position: {
                    lat: 31.560236,
                    lng: 130.557855
                }
            }
        ]
    }
});