Where do I put Google Maps logic in Sencha-Touch 2? Multiple markers

Question

I have a functioning Google Map running on Google Appengine.

I want to turn this into a mobile friendly interface by using (maybe) Sencha Touch 2 . Maybe I'm supposed to know Sencha EXT JS4 as well but I can't see it stated anywhere in their docs.

I don't know JavaScript very well. This is my 'learn by doing' app.

I've been reading the examples in documentation for Sencha Touch 2 but it stops short after getting some TabPanels with basic html and images.

There are some other examples on github for Sencha Touch 2 MVC & forms which I'd like to work on but the first step is to re-create my functional map.

I have included the current working Google Maps loop:

for(var i = 0; i < pubs.length; ++i) {
    (function (address, name, phone, price, icon, lat, lng, boing) {
        var posi = new google.maps.LatLng(lat, lng);
        if(boing == 'true') {
            var bounce = google.maps.Animation.BOUNCE;
        };
        var marker = new google.maps.Marker({
            animation: bounce,
            map: beerMap.map,
            //changed this to beerMap
            icon: icon,
            shadow: shadow,
            position: posi,
            title: name
        });
        google.maps.event.addListener(marker, 'click', function () {
            content_string = '<div id=content>' + '<div id="infoWindow">' + '</div>' + '<h2 id="pubName" class="pubName">' + name + '</h2>' + '<div id="pubAddress">' + '<p><b>' + address + '</b>' + '<div id="pubPhone" class="pubPhone">' + '<p>Phone: ' + phone + '<p>Halvliterpris: NOK <b>' + price + '</b>';
            bubble.setContent(content_string);
            bubble.open(beerMap.map, marker);
        });
    })(pubs[i], pub_name[i], pub_phone[i], beer_price[i], marker_icon[i], pub_lat[i], pub_lng[i], pub_bounce[i]);
}

./app/app.js

Ext.Loader.setConfig({
    enabled: true
});
Ext.application({
    name: 'app',
    appFolder: 'static/app',
    controllers: ['Home'],
    launch: function () {
        console.log('Ext.application ~ launch');
        Ext.create('Ext.tab.Panel', {
            fullscreen: true,
            tabBarPosition: 'bottom',
            items: [{
                title: 'Home',
                iconCls: 'home'
            }, {
                title: 'Beer',
                iconCls: 'locate',
                xtype: 'map'
            }, {
                title: 'Gigs',
                iconCls: 'star'
            }]
        });
    }
});

./app/controller/Home.js

Ext.define('app.controller.Home', {
    extend: 'Ext.app.Controller',
    views: ['HomePage'],
    init: function() {

        console.log('Home controller init method...');
    }
});

./app/view/HomePage.js

Ext.define('app.view.HomePage', {
    extend: 'Ext.Panel',
    alias: 'widget.homepage',
    config: {
        html: '<img src="http://staging.sencha.com/img/sencha.png" />'
    },
    initialize: function () {
        console.log("InitComponent for homepage");
        this.callParent();
    }
});

Answer 1

In my demo APP I have put my marker logic in the maprender method:

First the controller's init method:

/**
  * The init method will be executed first. Here we define how this controller should behave.
  */
init: function() {
    this.control({
        'viewport' : {
            activeitemchange : 'handleItemChange'
        },
        'map' : {
            maprender : 'onGMapRender'
        }
    });
},

Then my method GMapRender() :

/**
  * This method will be invoked after the google maps is rendered.
  * Here we will define the current user location.
  */
onGMapRender: function(comp, map) {

},

In the method GMapRender (actually it is the method maprender You have the map object where you can do fun stuff with the Google Maps object.

Hope this help you in the right direction.