How to retrieve data from a store in Sencha Touch - google-maps

Question

Now I have my store: stuStore set up which contains some mock-up data.
I have another page which is a Google Map.
Student data structure: {name, geolocation,value, etc....}
I would like to display each of students info based on their locations which is inside of stuStore onto the google Map.
Here is the code:
Ext.define('myapp.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
fullscreen: true,
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.Map',
'Ext.Panel',
'Ext.tab.*',
'Ext.*'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'myapp',
iconCls:'maps',
xtype: 'map',
useCurrentLocation: true,
store: 'myapp.store.stuStore'
}
How can I do it?
Update 1
var mapdemo = Ext.create('Ext.Map', {
mapOptions: {
center: new google.maps.LatLng(-37.73228, 144.86900), //nearby San Fran
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
title: 'MyApp',
iconCls: 'maps',
fullscreen: true,
xtype: 'map',
id: 'mainMap',
useCurrentLocation: false,
listeners: {
maprender: function (comp, googleMap) {
var store, latlng, marker;
store = Ext.getStore('myapp.store.stuStore');
store.each(function (record, index, length) {
latlng = new google.maps.LatLng(record.get('Lat'), record.get('Lng'));
marker = new google.maps.Marker({
position: latlng,
map: this
});
});
}
}
}),
infowindow = new google.maps.InfoWindow({
content: 'Sencha HQ'
});
Ext.define('myapp.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
fullscreen: true,
config: {
tabBarPosition: 'bottom',
items: [mapdemo],
}
});
This is my updated code in view\Main.js
But I don't get any markers and it keeps throwing an error:
Uncaught TypeError: Cannot call method 'each' of undefined
Incidentally, the icon on the toolbar which is docked at bottom of the screen is gone as well.
What can I try next?

Answer 1

You can create markers based on store records by looping through them in the maprender event callback like this:
Ext.define('myapp.controller.MapController', {
extend: 'Ext.app.Controller',
config: {
refs: {
mapComponent: 'main map'
},
control: {
mapComponent: {
maprender: 'onMaprender',
}
}
},
onMaprender: function(mapComponent, googleMap) {
var store, latLng, marker;
// Get store
store = Ext.getStore('myapp.store.stuStore')
// On each store record
store.each(function(record, index, length) {
// Get position
latLng = new google.maps.LatLng(record.get('lat'), record.get('lng'));
// Create marker
marker = new google.maps.Marker({
position: latLng,
map: googleMap
});
});
}
});
Have a look at this Sencha Fiddle I put together.