title: Where do I put Google Maps logic in Sencha-Touch 2? Multiple markers
body: <p>I have a functioning Google Map running on Google Appengine.</p>
  
  <p>I want to turn this into a mobile friendly interface by using (maybe) <a href="http://docs.sencha.com/touch/2-0/" rel="nofollow">Sencha Touch 2</a>. Maybe I'm supposed to know <a href="http://docs.sencha.com/ext-js/4-0/" rel="nofollow">Sencha EXT JS4</a> as well but I can't see it stated anywhere in their docs.</p>
  
  <p>I don't know JavaScript very well. This is my 'learn by doing' app.</p>
  
  <p>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. </p>
  
  <p>There are some other examples on github for Sencha Touch 2 MVC &amp; forms which I'd like to work on but the first step is to re-create my functional map.</p>
  
  <p>I have included the current working Google Maps loop: </p>
  
  <pre><code>for(var i = 0; i &lt; 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 = '&lt;div id=content&gt;' + '&lt;div id="infoWindow"&gt;' + '&lt;/div&gt;' + '&lt;h2 id="pubName" class="pubName"&gt;' + name + '&lt;/h2&gt;' + '&lt;div id="pubAddress"&gt;' + '&lt;p&gt;&lt;b&gt;' + address + '&lt;/b&gt;' + '&lt;div id="pubPhone" class="pubPhone"&gt;' + '&lt;p&gt;Phone: ' + phone + '&lt;p&gt;Halvliterpris: NOK &lt;b&gt;' + price + '&lt;/b&gt;';
              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]);
  }
  </code></pre>
  
  <p>./app/app.js</p>
  
  <pre><code>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'
              }]
          });
      }
  });
  </code></pre>
  
  <p>./app/controller/Home.js</p>
  
  <pre><code>Ext.define('app.controller.Home', {
      extend: 'Ext.app.Controller',
      views: ['HomePage'],
      init: function() {
  
          console.log('Home controller init method...');
      }
  });
  </code></pre>
  
  <p>./app/view/HomePage.js</p>
  
  <pre><code>Ext.define('app.view.HomePage', {
      extend: 'Ext.Panel',
      alias: 'widget.homepage',
      config: {
          html: '&lt;img src="http://staging.sencha.com/img/sencha.png" /&gt;'
      },
      initialize: function () {
          console.log("InitComponent for homepage");
          this.callParent();
      }
  });
  </code></pre>