PDA

View Full Version : Add Markers to Map after Maprender



haluzak
17 Jul 2011, 1:42 PM
I want to load markers to my map, in sencha touch, after I load some json data from ajax request. The thing is I don't know how to achieve this after the maprender event is fired. I've got this:

my map view:

app.views.MapTab = Ext.extend(Ext.Panel, {
iconCls: 'map',
id: 'map',
items: [{
xtype: 'map',
id: 'mapa',
mapOptions : {
center : new google.maps.LatLng(50.077721, 14.448585),
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners : {
'maprender' : function(comp, map){
Ext.dispatch({
controller: app.controllers.map,
action: 'map_rendered',
map: map
});
}
}
}],
initComponent: function() {
app.views.MapTab.superclass.initComponent.apply(this, arguments);
}
});
store to load json:

app.stores.results = new Ext.data.Store({
model: "app.models.Results",
proxy: {
type: 'ajax',
url: 'http://app.cz/json_list2.php?a=l&zp=1&u=vinohrady-praha&c0=500000&c1=6000000&p0=10&p1=120&cm20=1000&cm21=120000&pg=0&s=Datumu&t=byt&age=30&pod=0&lat=50.075401&lng=14.458344&pp=prodej&tp0=0&tp1=12',
reader: {
type: 'json',
root: 'markers'
}
},
listeners: {
'load': function (t, r, s) {
Ext.dispatch({
controller: app.controllers.map,
action: 'loaded',
records: r
});
}
}
});
controller

app.controllers.map = new Ext.Controller({

loaded: function(options) {
for(var i = 0; i < options.records.length; i++){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(options.records[i].get('lat'), options.records[i].get('lng')),
map: app.views.mapTab.getComponent('mapa')
});
}
// need to rerender/refresh the map here
},

map_rendered: function(options) {
console.log("map rendered");
}

});