title: Implementing Google Maps Directions in Sencha Touch MVC
body: <p>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:</p>
  
  <pre><code>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'});
  
  
      }
  </code></pre>
  
  <p>This will load the following view: </p>
  
  <pre><code>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: 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);
  </code></pre>
  
  <p>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'</p>
  
  <p>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.</p>