Sencha Touch 2 Multiple Latitude and Longitude on Sencha Map

Question

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.

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. 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.

Answer 1

Take a look at the kentuni app on GitHub. It is in sencha touch v1 and uses leaflet but it should be a good reference - it does exactly what you want with a list of locations that when clicked pushes a map view with marker.