Sencha Touch: Can't get map object from Ext.Map to give to the google directions service

Question

I have a Ext.Map object that I am trying to get the google.maps.map() object from, but it's not returning a valid object, so I can't render the directions on the map.

addMaps: function(options){
    directionsDisplay =new google.maps.DirectionsRenderer();        
    directionsService = new google.maps.DirectionsService();
    activeMarkers = new Array();
    uconnPosition = new google.maps.LatLng(41.809929, -72.25486);
    myMapPosition = new google.maps.LatLng(41.809929, -72.25486);
    curBuildingPosition = new google.maps.LatLng(41.809929, -72.25486);

    uconnMap = new Ext.Map({

        mapOptions : {
            center : new google.maps.LatLng(41.809929, -72.25486),  //UConn
            zoom : 16,
            mapTypeId : google.maps.MapTypeId.ROADMAP,
            navigationControl: true,
            navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.DEFAULT
                }
        },

        plugins : [
            new Ext.plugin.GMap.Tracker({
                    trackSuspended : true,   //suspend tracking initially
                    highAccuracy   : false,
                    marker : new google.maps.Marker({
                        position: uconnPosition,
                        title : 'My Current Location',
                        shadow: shadow,
                        icon  : image
                      })
            })
        ]

    });




   UConnApp.views.uconnTourMainPanel.add(uconnMap);
   directionsDisplay.setMap(uconnMap.getMap()); //THIS IS WHERE I THINK THE PROBLEM IS
   var org = new google.maps.LatLng(41.806501, -72.252769);
   var dest = new google.maps.LatLng(41.805222,-72.254388);

   var request = {
            origin: org,
            destination:dest,
            travelMode: google.maps.TravelMode.WALKING
        };
   directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        })
},

So the map is created without issue, but when I try to send the map object to the Google Maps directions service, it won't render to my map. I have tried both uconnMap.getMap() and uconnMap.map, but have not gotten an object back from either that the direction service renders to. Could anyone help me please?

Answer 1

You need to use the following code ::

   UConnApp.views.uconnTourMainPanel.add(uconnMap);


   directionsDisplay.setMap(uconnMap.map); // Changed this line for you…
   var org = new google.maps.LatLng(41.806501, -72.252769);
   var dest = new google.maps.LatLng(41.805222,-72.254388);

   var request = {
            origin: org,
            destination:dest,
            travelMode: google.maps.TravelMode.WALKING
        };
   directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        })

Now everything works fine. I just tested it out in my app for you :)