Add map marker from controller

[insomnix]

My understanding of the "proper" way to build in architect is to place all the actual work in the controller file. Then all the work under view is all about appearance. I'm having a bit of trouble adding a marker to my map. Below is my code for my controller and the map view. In one post I had read, it recomended re-rendering the map, it did not work. Any ideas would be very helpful.

Controller:

Ext.define('MyApps.controller.MyApp', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            dataList: '#dataList',
            listCard: '#listCard',
            mainNav: '#mainNav',
            detailCard: '#detailCard'
        },

        control: {
            "#dataList": {
                itemtap: 'onListItemTap'
            }
        }
    },

    onListItemTap: function(dataview, index, target, record, e, options) {
        var me = this,
        map,
        marker,
        lat,
        long,
        loc,
        info, 
        details;

        if (record) {

            details = Ext.create('MyApps.view.DetailPanel', {
                title: 'Details'
            });

            // set the map
            map = details.child('#detailMap');
            lat = record.get('location_lat');
            lon = record.get('location_long');

            map.setMapOptions({
                zoom: 17
            });

            map.setMapCenter({
                latitude: lat,
                longitude: lon
            });

            var position = new google.maps.LatLng(lat,lon); 

            marker = new google.maps.Marker({
                position: position,
                map: map.map,
                animation: google.maps.Animation.DROP
            }); 
            //map.rendered = false;
            //map.render();

            // set the info
            info = details.child('#contact').child('#info');
            info.child('#photo').setData(record.data);
            info.child('#data').setData(record.data);

            info = details.child('#contact').child('#cp');
            info.child('#details').setData(record.data);

            me.getMainNav().push(details);
        }
    },

    getLocation: function(callback) {
        if (navigator && navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                callback(position);
            }, function(error) {
                // give a warning for error
            });
        }
    },

    getMyApps: function(location, callback) {
        var store = Ext.data.StoreManager.lookup('MyAppStore'),
        url = 'http://MyApp.co/searchapi.js' +
        '?distance=20' +
        '&lat=' + location.coords.latitude +
        '&long=' + location.coords.longitude;

        store.getProxy().setUrl(url);

        store.load(function() {
            callback(store);
        });
    },

    launch: function() {
        var me = this;

        Ext.Viewport.setMasked({ message: 'Loading...' });
        // get the location...
        me.getLocation(function (location) {

            // get items
            me.getMyApps(location, function (store) {

                // then bind data to list and show it
                me.getDataList().setStore(store);

                Ext.Viewport.setMasked(false);
            });
        });
    }

});

Map and details:

Ext.define('MyApps.view.DetailPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.detailpanel',

    config: {
        tabBar: {
            docked: 'top',
            ui: 'light',
            layout: {
                pack: 'center',
                type: 'hbox'
            }
        },
        items: [
            {
                xtype: 'container',
                id: 'contact',
                title: 'Details',
                items: [
                    {
                        xtype: 'container',
                        id: 'info',
                        padding: 10,
                        layout: {
                            type: 'hbox'
                        },
                        items: [
                            {
                                xtype: 'component',
                                id: 'photo',
                                tpl: [
                                    '<img src="{photo_url}"/>'
                                ]
                            },
                            {
                                xtype: 'component',
                                id: 'data',
                                padding: '',
                                tpl: [
                                    '<h2>{company_name}</h2>',
                                    '{location_address}<br/>',
                                    '{location_city}, {location_state} {location_zip}<br/>',
                                    '{location_phone}'
                                ]
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        id: 'cp',
                        padding: 10,
                        items: [
                            {
                                xtype: 'component',
                                id: 'details',
                                tpl: [
                                    '<h2>{title}</h2>',
                                    '{description}<br/>'
                                ]
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        id: 'MyContainer2',
                        layout: {
                            pack: 'center',
                            type: 'hbox'
                        },
                        items: [
                            {
                                xtype: 'button',
                                hidden: true,
                                width: 100,
                                text: 'Call'
                            },
                            {
                                xtype: 'spacer',
                                hidden: true,
                                width: 57
                            },
                            {
                                xtype: 'button',
                                hidden: true,
                                width: 100,
                                text: 'More'
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'map',
                id: 'detailMap',
                itemId: 'mymap',
                ui: 'light',
                title: 'Map'
            }
        ]
    }

});

[insomnix]

Any thoughts

[insomnix]

Anyone?

[celticboyone]

You just need to set the marker position, like this. It will appear automatically

            // Place the marker on the map and name the marker with the bar name
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, long),
                map: map.getMap(),
                title: record.data.name
            });

[insomnix]

Awesome, thanks.