Implementing Google Maps Directions in Sencha Touch MVC

I've got a local store that has addresses in it. I view an address and click "drive" which will run the following code in the controller:

showDirections: function(dataObj) {
        var directionsDisplay = new google.maps.DirectionsRenderer();
        var directionsService = new google.maps.DirectionsService();

        var start = '915 4th st, modesto, ca';

        var end = dataObj.data.get('address').value  + ' ' +
        dataObj.data.get('city').value + ' ' +
        dataObj.data.get('state').value + ' ' +
        dataObj.data.get('zip').value;

        var model = dataObj.model;

        var contactDrive = new MyApp.ContactDrivePanel(start, end, model);
        console.log(model);
        console.log(contactDrive)

        MyApp.viewport.setActiveItem(contactDrive, {type:'slide', direction:'left'});


    }

This will load the following view:

MyApp.ContactDrivePanel = Ext.extend(Ext.Panel, {


            layout: 'fit',

            address: "",
            start: "",
            end: ""


            ,model: null

            ,constructor : function(start, end, model) {
                console.log('hello');
                this.start = start;
                this.end = end;
                this.model = model;
                console.log(this.model);
                console.log('start: ' + start);
                console.log('end: ' + end);

                MyApp.ContactDrivePanel.superclass.constructor.apply(this);
            }

            ,initComponent : function () {
                var directionDisplay;
                var map;
                console.log("initializing ContactDrivePanel");
                this.dockedItems = this.buildToolbars();


                var directionsDisplay = new google.maps.DirectionsRenderer();
                var directionsService = new google.maps.DirectionsService();
                var geocoder = new google.maps.Geocoder();

                var thestart = geocoder.geocode({'address': start});
                var theend = geocoder.geocode({'address': end});

                var request = {
                    origin: this.start,
                    destination: this.end,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };

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

                var pnl = new Ext.Panel({
                            fullscreen:开发者_StackOverflow中文版 true,
                            items     : [
                                {
                                    xtype             : 'map',
                                    useCurrentLocation: true
                                }
                            ]
                        });


                MyApp.ContactDrivePanel.superclass.initComponent.call(this);


            },

            buildToolbars : function() {
                console.log('Model in buildToolbars: ' + this.model);
                return [
                    {
                        xtype : 'toolbar',
                        dock  : 'top',
                        title: 'Map Contact Address',
                        items : [
                            {
                                text : 'Back'
                                ,ui   : 'back'
                                ,handler : this.back
                                ,scope: this // This is necessary for scoping the object's model object correctly
                            }
                        ]
                    }
                ]
            },

            back : function(btn, evt) {
                console.log('Model in the back function: ' + this.model);
                Ext.dispatch({
                            controller : 'ContactFormPanelController'
                            ,action    : 'returnToDetails'
                            ,model: this.model
                        });
            },

            setModel : function(model) {
                this.model = model;
            }

        });

// Sp that lazy instantiation may be used in creating ContactMapPanels
Ext.reg('contactDrive', MyApp.ContactDrivePanel);

As you can see I've tried a couple of different things. I've tried geocoding the address which gives me the error: 'Uncaught TypeError: Cannot call method "apply" of undefined'

And without geocoding it just doesn't work. I get the map on the screen, but that's it. And of course, it's centered on Palo Alto.

add this line after directionsDisplay.setDirections(response):

directionsDisplay.setMap(map.map);

to tie the directionsDisplay to the map

Check out this sencha touch app. It does exactly what you are looking for. It may solve your problem.

http://septa.mobi/

Not sure if this will help... But i tried ur code and then a bunch of other examples.... I've hit upon this (which seems to be working fine as of now)

For the Map :

pos = new google.maps.LatLng(lats, longs);
mapPanel = new Ext.Map({
        id : 'myMap',
        mapOptions : {
            center : pos,
            zoom : 20,
            mapTypeId : google.maps.MapTypeId.HYBRID,
            navigationControl: true,
            navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.DEFAULT
                }
        },            

        plugins : new Ext.plugins.GMap.Tracker({
            trackSuspended : true,   //suspend tracking initially
            marker : new google.maps.Marker({
                position: pos,
                title : 'Working!!!!'
              }) 
            }), 

        listeners : {
            maprender : function(comp, map){
                var marker = new google.maps.Marker({
                     position: pos,
                     //title : 'Sencha HQ',
                     map: map
                });

                google.maps.event.addListener(marker, 'click', function() {
                     infowindow.open(map, marker);
                }); 


                setTimeout( function(){map.panTo (pos);} , 1000);

                var marker = new google.maps.Marker({
                     position: pos,
                     map: mapPanel.map
                });
            }

        }
    });

For the Directions I used a button on the toolbar with the handler:

handler: function(){

                        var directionsDisplay = new google.maps.DirectionsRenderer();
                        var directionsService = new google.maps.DirectionsService();
                        directionsDisplay.setMap(mapPanel.map);
                        //alert("ok pressed");
                        var start = "carter road, bandra, mumbai";
                        var end = "Bandra Station, Mumbai, India";
                        var request = {
                            origin:start, 
                            destination:end,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING
                        };
                        directionsService.route(request, function(response, status) {
                            if (status == google.maps.DirectionsStatus.OK) {
                                directionsDisplay.setDirections(response);
                            }
                        });
                    }.........

Is this what you were looking for ? It sets the position to center on any point u choose, not Palo Alto... as well as shows the map with directions