Using the Oreilly map demo to map a location, I am trying to modify the Location.js in the app\view directory it to do driving directions to the location. The error is on this line: directionsRenderer.setMap(map);

After running the following code, I receive the error message "Uncaught error: Invalid value for property <map>", [object] Object

Ext.define('HCofC.view.Location', {


extend: 'Ext.Container',
requires: 'Ext.Map',


xtype: 'location',


config: {


title: 'Location',
iconCls: 'locate',


layout: 'fit',


items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Location'
}
]
},


initialize: function() {

var directionRenderer;
var directionsService = new google.maps.DirectionsService();
var map;

var position = new google.maps.LatLng(HCofC.app.mapCenter[0], HCofC.app.mapCenter[1]),
infoWindow = new google.maps.InfoWindow({ content: HCofC.app.mapText }),
map, marker;


this.callParent();


map = this.add({
xtype: 'map',
mapOptions: {
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
});


directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);

marker = new google.maps.Marker({
position: position,
map: map.getMap(),
visible: true
});


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