Question

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: 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.

Answer 1

add this line after directionsDisplay.setDirections(response):

directionsDisplay.setMap(map.map);

to tie the directionsDisplay to the map