View Full Version : Google maps markers and Sencha touch 2

13 Apr 2012, 4:21 AM
I have an application made in Sencha Touch 2 that uses a Google Map. The map is going to display the position of several markers loaded from a JSON file with an Store. My question is, how can I read the markers from my Store? how can I use the data from the store to generate the markers?

This is what I have and IT IS WORKING FIND because I have an inline array "neighborhoods":

The Map:

Ext.define('MyApp.view.detalleMapa', {
extend: 'Ext.Map',
alias: 'widget.detallemapa',

config: {
listeners: [
fn: 'onMapMaprender',
event: 'maprender'

onMapMaprender: function(map, gmap, options) {

var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)

for (var i = 0; i < neighborhoods.length; i++) {
var m = neighborhoods[i];

new google.maps.Marker({
position: m,
map: gmap,
draggable: false,
animation: google.maps.Animation.DROP


The Store:

Ext.define('MyApp.store.itemsStore', {
extend: 'Ext.data.Store',
alias: 'store.itemsstore',
requires: [

config: {
autoLoad: true,
model: 'MyApp.model.modelo',
storeId: 'itemsStoreId',
proxy: {
type: 'ajax',
url: '/markersJsonFormat.json',
reader: {
type: 'json',
rootProperty: ''

So far everything works fine because I use the array-markers "neighborhoods" into the map-class, but how can I use the array that was loaded by the store from the file 'markersJsonFormat.json'?

any idea?
Thanks! :)

PD: this is my app:

requires: [

models: [
stores: [
views: [
name: 'MyApp',

launch: function() {

Ext.create('MyApp.view.detalleMapa', {fullscreen: true});


13 Apr 2012, 6:25 AM
You can get the store via

var store = Ext.getStore('itemsStoreId');

Once the store loads you can iterate through it:

store.each(function(record) {
//add marker using record.get

13 Apr 2012, 8:34 AM
Hi Mitchell!
Thanks for your answer, unfortunately I'm using Sencha Designer and in there getStore() does not work :( in the way you suggested.
Please watch this (3min) video where you can see the problem:

http://www.youtube.com/watch?v=zI6I6Y3eIQw - (3min)


16 Apr 2012, 11:03 AM
Hi! do you have any idea why is not working what you suggested? Thanks!

8 Aug 2012, 4:00 PM
Did you try to invoke store.load() before store.each() .... ?