Sencha Touch 2: Google Maps Directions Route won't show

Question

I'm using a view to show a location on a map with a small form below it to grab the users address if they want directions. The map renders initially as I want. There is a controller to handle tapping the button and updating the display with the route. I can see that it is successfully retrieving the route information. It's just not updating the display to show it. What am I missing?

Here's the view:

var tcmlatlng = new google.maps.LatLng(38.898748, -77.037684);
Ext.define('VisitTCMIndy.view.Directions',{
extend: 'Ext.Panel',
requires: [
    'Ext.form.Panel',
    'Ext.Map'
],
config: {
    layout: 'vbox',
    items: [
        {
            xtype: 'map',
            useCurrentLocation: false,
            flex: 3,
            mapOptions: {
                center: tcmlatlng,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            listeners: {
                maprender: function(map,gmap,options){
                    var homemarker = new google.maps.Marker({
                        position: tcmlatlng,
                        map: gmap
                    });
                }
            }

        },
        {
            xtype: 'formpanel',
            id: 'directionsform',
            flex: 1,
            items:[
                {
                    xtype: 'textfield',
                    name: 'address',
                    label: 'Address',
                },
                {
                    xtype: 'button',
                    ui:'action',
                    text: 'Get Directions'
                }
            ]
        }
    ]
}
});

Here's the controller

Ext.define('VisitTCMIndy.controller.Directions',{
extend: 'Ext.app.Controller',
config: {
    control: {
        dButton: {
            tap: 'loaddirections'
        }
    },
    refs: {
        dButton: '#directionsform button[ui=action]',
        tcmmap:'map',
        addfield:'textfield[name=address]'
    }
},

loaddirections: function(dbutton){
    console.log('loaddirections');
    var gmap = this.getTcmmap();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
    directionsDisplay.setMap(gmap.map);
    var tcmadd = "1600 Pennsylvania Ave, Washington, DC";
    var originadd = this.getAddfield().getValue();

    var request = {
        origin: originadd,
        destination: tcmadd,
        travelMode: google.maps.TravelMode.DRIVING
    };

    directionsService.route(request, function(result, status){
        console.log(status);
        if(status = google.maps.DirectionsStatus.OK){
            console.log(result);
            directionsDisplay.setDirections(result);
        }
    });
}
});

Answer 1

I was referencing the map incorrectly. I was trying to reference it directly instead of using the getter. So anywhere you see 'gmap.map' it should read 'gmap.getMap()'.