Hello, I´ve been researching several hours, the problem with the architect is to add the "Map" component INSIDE another component like a panel.. then, the features, properties and listeners could not be related to the "MAP" component...
this causes the listeneres not be associated with the map, and not fire when the maprender should trigger...
so, the best approach is to create a independent MAP view on a map.js file... do all the configuration with the listeners, configs, etc...
Here you have complete example of having a panel... a map inside, and adding a MARK on it... enojoy!!
this goes into the view js file: MapView.js
Code:
Ext.define('MyApp.view.MapView', {
extend: 'Ext.Container',
alias: 'widget.mapview',
requires: [
'MyApp.view.AppGoogleMap'
],
config: {
id: 'MapView',
layout: {
type: 'fit'
},
items: [
{
xtype: 'appgooglemap'
}
]
}
});
// THIS GOES INTO A SEPARATE FILE AppGoogleMap.js
Code:
Ext.define('MyApp.view.AppGoogleMap', {
extend: 'Ext.Map',
alias: 'widget.appgooglemap',
config: {
listeners: [
{
fn: 'onMapMaprender',
event: 'maprender'
}
]
},
onMapMaprender: function(map, gmap, eOpts) {
//gmap is null, so we need to get the google map instance from sencha map object:
var theGoogleMapInstance = map._map;
var myLatlng = new google.maps.LatLng(-0.219565,-78.513388);
var infoWindow = new google.maps.InfoWindow({ content:'Sample Content' });
var marker = new google.maps.Marker(
{ position: myLatlng,
title: 'this is the place'
});
marker.setMap(theGoogleMapInstance);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(theGoogleMapInstance, marker);
});
},
initialize: function() {
this.callParent();
var gMap = this;
var myLatlng = new google.maps.LatLng(-0.219565,-78.513388);
gMap.setConfig({
mapOptions : {
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 17
}
});
//the gMap._map property is null at this time... because the Google Maps has not been created yet
//we cannot add the marker yet
//var marker = new google.maps.Marker(
// { position: myLatlng
// });
//marker.setMap(gMap._map);
}
});