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.
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'
})