Clearing Multiple Direction Results Of A Google Map

I am leveraging Google Maps V3 javascript api within Ext Js 5.0.0 framework in order to display directions on a map. Everything works fine and directions are rendered and cleared p

Solution 1:

As I indicated in my comment, you are only keeping a reference to one of the DirectionRenderer objects. If you want to remove all the routes, you need to keep references to all of them and call setMap(null) on each one.

One way:

var dirDspArray = [];

functionfindRoute() { //gets the directionsvarfrom = Ext.getCmp('from').getValue();
    var to = Ext.getCmp('to').getValue();
    dirSvc = new google.maps.DirectionsService();
    dirDsp =  new google.maps.DirectionsRenderer();
    travelMethod = Ext.getCmp('method').getValue();

    var directionsRequest = {
        origin: from,
        destination: to,
        travelMode: google.maps.DirectionsTravelMode[travelMethod],
        unitSystem: google.maps.UnitSystem.IMPERIAL
    };
    api = Ext.getCmp('mygooglemap').gmap;

    dirPanel = Ext.getCmp('textDirections');

    dirSvc.route(
    directionsRequest,

    function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {

            dirDsp.setMap(api);
            dirDsp.setPanel(document.getElementById('directions'));
            dirDsp.setDirections(response);
            dirDspArray.push(dirDsp);
        } else {
            alert('unable to retrieve');
        }
    });

}

functionresetFields() {   //clears off all directionsExt.getCmp('from').reset();
    Ext.getCmp('to').reset();

    while (dirDspArray.length >0) {
      dirDsp = dirDspArray.pop();
      dirDsp.setMap(null);
      dirDsp.setPanel(null)
    }
    document.getElementById('directions').innerHTML="";
}

proof or concept fiddle

code snippet:

Ext.onReady(function () {
    var el = 'ext-map';
    var api = null;
    var dirSvc = null;
    var dirDsp = null;
    var dirDspArray = [];
    var travelMethod = null;
    var dirPanel = 'directions';
    var w = Ext.create('Ext.Panel', {
        renderTo: el,
        title: 'Gmap',
        height: 600,
        width: 800,
        layout: 'border',
        items: [{
            region: 'west',
            title: 'Directions',
            collapsible: true,
            width: 150,
            items: [{
                xtype: 'textarea',
                id: 'from',
                fieldLabel: 'From',

                handler: addInfoWindow // reference to event handler function 
            }, {
                xtype: 'textarea',
                id: 'to',
                fieldLabel: 'To',

                handler: addInfoWindow // reference to event handler function 
            }, {
                xtype: 'combo',

                width: 150,
                fieldLabel: 'Travel Method',
                id: 'method',
                value: 'DRIVING',
                name: 'Travel Method',
                queryMode: 'local',
                store: ['DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT'],
                displayField: 'title',
                autoSelect: true,
                forceSelection: true,
                matchFieldWidth: true,
                listConfig: {
                    maxHeight: 150
                }


            }, {
                xtype: 'button',
                text: 'Submit',
                handler: findRoute
            }, {
                xtype: 'button',
                text: 'Reset',
                handler: resetFields
            }]
        }, {
            xtype: 'gmappanel',
            region: 'center',
            id: 'mygooglemap',
            cls: 'reset-box-sizing',
            center: new google.maps.LatLng(53.5267, -1.13330),
            mapOptions: {
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        }]
    });

    /**
    
     * GMApPanel source code 
     * http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js
     */// get the map referencevar map = w.down('gmappanel');

    functionopenInfoWindow(content, marker) {
        // create a info windowvar infowindow = new google.maps.InfoWindow({
            content: content,
            size: new google.maps.Size(50, 50)
        });

        infoBubble = newInfoBubble({
            content: '<div class="example">Some label</div>',
            shadowStyle: 1,
            padding: 10,
            borderRadius: 5,
            minWidth: 200,
            borderWidth: 1,
            disableAutoPan: true,
            hideCloseButton: false,
            backgroundClassName: 'example'
        });

        infoBubble.open(map.gmap, marker);

        var div = document.createElement('DIV');
        div.innerHTML = 'Hello';
        infoBubble.addTab('A Tab', div);
        infoBubble.addTab('A Tab', div);
    }

    functionaddInfoWindow() {
        // uses GMapPanel `addMarker` method to create a marker and attached it to tree.// Detailes - look at the source code of GMapPanelvar marker = map.addMarker({
            lat: 53.5267,
            lng: -1.13330,
            title: 'Marker',
            // listeners can be added via configuration or after create // using standard google maps API, i.e.// google.maps.event.addListener(marker, 'click', function() {...})            listeners: {
                click: function () {
                    openInfoWindow('hello', marker);
                }
            }
        });

    }

    functionfindRoute() { //gets the directionsvarfrom = Ext.getCmp('from').getValue();
        var to = Ext.getCmp('to').getValue();
        dirSvc = new google.maps.DirectionsService();
        dirDsp =  new google.maps.DirectionsRenderer();
        travelMethod = Ext.getCmp('method').getValue();
       
        var directionsRequest = {
            origin: from,
            destination: to,
            travelMode: google.maps.DirectionsTravelMode[travelMethod],
            unitSystem: google.maps.UnitSystem.IMPERIAL
        };
        api = Ext.getCmp('mygooglemap').gmap;

        dirPanel = Ext.getCmp('textDirections');

        dirSvc.route(
        directionsRequest,

        function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
               
                dirDsp.setMap(api);
                dirDsp.setPanel(document.getElementById('directions'));
                dirDsp.setDirections(response);
                dirDspArray.push(dirDsp);
            } else {
                alert('unable to retrieve');
            }
        });

    }

    functionresetFields() {   //clears off all directionsExt.getCmp('from').reset();
        Ext.getCmp('to').reset();

        while (dirDspArray.length >0) {
          dirDsp = dirDspArray.pop();
          dirDsp.setMap(null);
          dirDsp.setPanel(null)
        }
        document.getElementById('directions').innerHTML="";
    }

    w.show();
});

.x-border-box.reset-box-sizing * {
    box-sizing: content-box;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.js"></script><scriptsrc="https://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js"></script><scriptsrc="https://maps.googleapis.com/maps/api/js"></script><scriptsrc="https://cdn.rawgit.com/googlemaps/js-info-bubble/gh-pages/src/infobubble.js"></script><linkhref="https://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" /><divid='ext-map'></div><divid='directions'></div>