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([0],[1]),
infoWindow = new google.maps.InfoWindow({ content: }),
map, marker;


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

directionsRenderer = new google.maps.DirectionsRenderer();

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

google.maps.event.addListener(marker, 'click', function() {, marker);