javascript - Sencha Touch 2 Map using different Latitude and Longitude for each item in List (Sencah) -

i building app contains list of addresses. app working in such way once user clicks on each of items (addresses) in list, next page shows map, , map has marker points exact location of address clicked on. made possible due latitude , longitude coordinates stated in code. problem have more 1 address, , each of these addresses have unique longitude , latitude. want make app work in such way when user clicks on address interested in, app open page , show map , marker pointing exact location of address on map. code's below: working perfectly, when user clicks on address, takes them same logitude , latitude.

my store:

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 & 97-2, jalan mahogani 5/ks7, ambang botanic, 41200 klang,   selangor",         latitude : 3.003384,         longitude : 101.45256,         id: 'm1',     }, ]  } }); 

my controller:

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);                  },            },          })      }, }); 

my view:

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                  }             },     }   }); 

my model:

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(" "); } }); 

help me out please. need each of addresses on list tagged latitude , longitude when user clicks on address, point exact location map.

your line:

var position = new google.maps.latlng(5.978132,116.072617); 

is fixed same coordinates never change.

in application have view fire event controller , in controller have reference record's coordinates set map.

in view:

 config: {         layout: 'fit',         items: [             {                 xtype: 'map',                 listeners: {                     maprender: function (extmapcomponent, googlemapcomp) {                         this.fireevent('googlemaprender', googlemapcomp);                     }                  }              }         ]  } 

controller:

 refs: {            mapref: 'map'    },     control: {                         mapref: {                 googlemaprender: 'ongooglemaprender'             }    }   ongooglemaprender: function (googlemap) {          // this.selectedrecord should set when select item in list          // can pull coordinates off         var record = this.selectedrecord;          var long = record.get("longitude");         var lat = record.get("latitude");          var marker = new google.maps.marker({             position: new google.maps.latlng(lat, long);         });          marker.setmap(googlemap);   }