title: Sencha Touch 2 Map using different Latitude and Longitude for each item in List (Sencah)
body: <p>I am building an app which contains a list of addresses. This app is working in such a way that once the user clicks on each of the items (addresses) in the list, the next page shows a map, and the map has a marker which points to the exact location of the address clicked on. This is made possible due to the Latitude and Longitude coordinates stated in code.
  My problem is that I have more than one address, and each of these addresses have a unique longitude and latitude. I want to make my app work in such a way that when a user clicks on any address they are interested in, the app will open a page and show the map and a marker pointing to the exact location of the address on the map. My code's below: it is working perfectly, BUT when the user clicks on the address, it takes them to the same logitude and latitude.</p>
  
  <p>My store:</p>
  
  <pre><code>Ext.define('List.store.Presidents', {
  extend : 'Ext.data.Store',
  
  config : {
      model : 'List.model.President',
      sorters : 'lastName',
      grouper : function(record) {
          return record.get('lastName')[0];
      },
  
      data : [{
  
          firstName : "Ikhlas HQ",
          lastName : "Tower 11A, Avenue 5, Bangsar South, No.8 Jalan Kerinchi 59200 Kuala Lumpur",
          latitude : 3.110649,
          longitude : 101.664991,
          id: 'm12',
      },
      {
          firstName : "PEJABAT WILAYAH SELANGOR",
          lastName : "No. 97, 97-1 &amp; 97-2, Jalan Mahogani 5/KS7, Ambang Botanic, 41200 Klang,   Selangor",
          latitude : 3.003384,
          longitude : 101.45256,
          id: 'm1',
      }, ]
  
  }
  });
  </code></pre>
  
  <p>My controller:</p>
  
  <pre><code>Ext.define('List.controller.Main', {
  extend: 'Ext.app.Controller',
  
  config: {
  
      control: {
          'presidentlist': {
              disclose: 'showDetail'
          },
       }
   },
  showDetail: function(list, record) {
              this.getMain().push({
                  xtype: 'presidentdetail',
                  title: record.fullName(),
  
  listeners: {
              maprender: function(comp, map) {
                  var position = new google.maps.LatLng(5.978132,116.072617);
                  var marker = new google.maps.Marker({
                      position: position,
                      map: map
                          });
              google.maps.event.addListener(marker, 'click', function() {
                      infowindow.open(map, marker);
                          });
              setTimeout(function() {
                      map.panTo(position);
                  }, 1000);
  
                  },
             }, 
          })
       },
  });
  </code></pre>
  
  <p>My view:</p>
  
  <pre><code>Ext.define('List.view.PresidentDetail', {
  extend : 'Ext.Map',
  xtype: 'presidentdetail',
  
      config: {
                  title: 'Details',
                  styleHtmlContent: true,
                  scrollable: 'vertical',
                  //useCurrentLocation: true,
                  layout: 'fit',
  
      mapOptions: {
                  zoom: 16,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  navigationControl: true,
                  navigationControlOptions: {
                  style: google.maps.NavigationControlStyle.DEFAULT
                   }
              },
      }
  
  
  });
  </code></pre>
  
  <p>My model:</p>
  
  <pre><code>Ext.define('List.model.President', {
  extend : 'Ext.data.Model',
  config : {
      fields : ['firstName', 'middleInitial', 'lastName', 'latitude', 'longitude']
  },
  fullName : function() {
      var d = this.data, names = [d.firstName, (!d.middleInitial ? "" : d.middleInitial + "."), d.lastName];
      return names.join(" ");
  }
  });
  </code></pre>
  
  <p>Help me out please. I need each of the addresses on the list to be tagged with a latitude and longitude so that when the user clicks on the address, it will point to the exact location the map.</p>