Google Map API in Sencha Touch

View:

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',

    config: {
        layout: {
            type: 'hbox'
        },
        items: [
            {
                xtype: 'list',
                itemId: 'list',
                width: '200px',
                itemTpl: [
                    '

{name}
'
                ],
                store: 'MyJsonStore'
            },
            {
                xtype: 'map',
                flex: 1,
                itemId: 'googleMap',
                width: 300,
                mapOptions: {
                    disableDefaultUI: true,
                    zoom: 17,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
            }
        ],
        listeners: [
            {
                fn: 'onListSelect',
                event: 'select',
                delegate: '#list'
            }
        ]
    },

    onListSelect: function(dataview, record, eOpts) {
        var me = this;
        var googleMap = me.down('#googleMap');
        console.log('name  = '+ record.get('name')+' ; address = '+ record.get('address'));
        if (record){
            var address = record.get('address');
            // Geodecode
            var geocoder = new window.google.maps.Geocoder();
            var map = googleMap;
            geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == window.google.maps.GeocoderStatus.OK) {
                setTimeout(function () {
                    map.getMap().setCenter(new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()));
                    var marker = new google.maps.Marker({
                        map: map.getMap(),
                        position: results[0].geometry.location
                    });
                    //map.markersArray.push(marker);
                    var infowindow = new google.maps.InfoWindow({
                        content: address,
                        maxWidth: 120
                    });
                    infowindow.open(map.getMap(), marker);
                }, 500);
            } else {
                console.log('Geocode was not successful for the following reason: ' + status);
            }
        });

    }

    }

});

Store

Ext.define('MyApp.store.UniversityStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.University'
    ],

    config: {
        autoLoad: true,
        autoSync: true,
        model: 'MyApp.model.University',
        storeId: 'MyJsonStore',
        proxy: {
            type: 'ajax',
            url: 'university.json',
            reader: {
                type: 'json'
            }
        }
    }
});

Model:

Ext.define('MyApp.model.University', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            {
                name: 'name'
            },
            {
                name: 'address'
            }
        ]
    }
});

Data:

[
 {
 "name":"New York University",
 "address":"70 Washington Square S New York, NY 10012"
 }
 ,
 {
 "name":"University of Zurich",
 "address":"Rämistrasse 71 8006 Zürich Switzerland"
 },
 {
 "name":"Yale University",
 "address":"New Haven, CT 06520"
 },
 {
 "name":"Hanoi University of Science and Technology",
 "address":"Số 1 Đại Cồ Việt Bách Khoa, Hai Bà Trưng Hà Nội, Vietnam"
 },
 {
 "name":"Trường Đại Học Bách Khoa Đà Nẵng",
 "address":"54 Nguyễn Lương Bằng Hòa Khánh Bắc, Liên Chiểu Đà Nẵng, Vietnam"
 },
 {
 "name":"Trường Đại học Bách khoa tp Hồ Chí Minh",
 "address":"268 Lý Thường Kiệt phường 14, Quận 10 Hồ Chí Minh, Vietnam"
 }
]

Add listener when click

var me = this;
var googleMap = me.down('#googleMap');
console.log('name  = '+ record.get('name')+' ; address = '+ record.get('address'));
if (record){
    var address = record.get('address');
    // Geodecode
    var geocoder = new window.google.maps.Geocoder();
    var map = googleMap;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == window.google.maps.GeocoderStatus.OK) {
            setTimeout(function () {
                map.getMap().setCenter(new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()));
                var marker = new google.maps.Marker({
                    map: map.getMap(),
                    position: results[0].geometry.location
                });
                //map.markersArray.push(marker);
                
                var infowindow = new google.maps.InfoWindow({
                    content: address,
                    maxWidth: 120
                });
                google.maps.event.addListener(marker, 'click', (function(marker) {
                    return function() {                                        
                        infowindow.open(map.getMap(), marker);
                    }
                })(marker));
                
            }, 500);
        } else {
            console.log('Geocode was not successful for the following reason: ' + status);
        }
    });
    
}