During the refactoring from modern toolkit to classic, i found a problem with markers component - they are not included in classic kit.

From Modern Toolkit Sencha Docs:

markers : Ext.data.Store / Object / Ext.data.Model[] / Ext.ux.google.map.Marker bindable

Can be either a Store instance, a configuration object that will be turned into a store, an array of model or a single model (in which case a store will be created). The Store is used to populate the set of markers that will be rendered in the map. Marker options are read through the markerTemplate config.

Is it real to integrate this component into Classic Toolkit? Can't found an optimal solution (if it's real) from the internet/documendation.

CodePudding user response：

In the classic toolkit, addMarker method expects an object.

FROM https://docs.sencha.com/extjs/7.0.0/classic/src/GMapPanel.js.html

addMarker: function(marker) {
        var o;
 
        marker = Ext.apply({
            map: this.gmap
        }, marker);
 
        if (!marker.position) {
            marker.position = new google.maps.LatLng(marker.lat, marker.lng);
        }
 
        o = new google.maps.Marker(marker);
 
        Ext.Object.each(marker.listeners, function(name, fn) {
            google.maps.event.addListener(o, name, fn);
        });
 
        return o;
    },

But you can simply implement the Marker, its a special record - but as it looks for me, they are not 1:1 compatible (position vs. lat lng).

https://docs.sencha.com/extjs/6.6.0/modern/src/Marker.js.html

Here is a classic toolkit marker:

Ext.define('Ext.ux.google.map.Marker', {
            extend: 'Ext.data.Model',
            fields: ['lat', 'lng', 'title']
});

All together

   // define marker
        Ext.define('Ext.ux.google.map.Marker', {
            extend: 'Ext.data.Model',
            fields: ['lat', 'lng', 'title']
        });
        
        // create map
        var mapwin = Ext.create('Ext.Window', {
            layout: 'fit',
            title: 'GMap Window',
            width: 800,
            height: 600,
            items: {
                xtype: 'gmappanel',
                gmapType: 'map',
                mapOptions: {
                    center: new google.maps.LatLng(-33.712451, 150.311823),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
            }
        }).show();
        
        // use marker as record
        let m = Ext.create('Ext.ux.google.map.Marker');
        m.set('lat', -33.732451);
        m.set('lng', 150.311823);
        m.set('title', 'foo bar');

        let data = m.getData();
        let {
            lat, lng, title
        } = data;

        mapwin.down('gmappanel').addMarker({
            lat, lng, title
        });
        
        // simple objects        
        mapwin.down('gmappanel').addMarker({
            lat: -33.712451,
            lng: 150.311823,
            title: 'Holmes Home'
        })

        mapwin.down('gmappanel').addMarker({
            lat: -33.722451,
            lng: 150.311823,
            title: 'Holmes Home'
        })

Fiddle https://fiddle.sencha.com/#view/editor&fiddle/3hnq