javascript - Clearing multiple direction results of a google map

Question

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 perfectly except for one test case, steps described below:

Step 1.Get Directions from address 1 to address 2 (works fine and displayed on map)

Step 2.Get Directions from address 3 to address 4, 5 to 6...(n-1) to n (works fine and all sets of directions are seen on map)

Step 3. Run directionsDisplay.setMap(null) to clear all sets of directions off the map.

For this case I observe that only (n-1)->n directions are cleared off the map and the rest of the previously searched directions remain. Is there a way to clear the map completely of all directions.

Code for my clearing function is below.

resetDirections: function(){

    var me = this;
    Ext.getCmp('mapWidgetFrom').reset();
    Ext.getCmp('mapWidgetTo').reset();

    me.dirDsp.setMap(null);
    me.dirDsp.setPanel(null);
    document.getElementById('textDirections').style.display='none';


},

Answer 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 = [];

function findRoute() { //gets the directions

    var from = 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');
        }
    });

}

function resetFields() {   //clears off all directions
    Ext.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 reference
    var map = w.down('gmappanel');

    function openInfoWindow(content, marker) {
        // create a info window
        var infowindow = new google.maps.InfoWindow({
            content: content,
            size: new google.maps.Size(50, 50)
        });

        infoBubble = new InfoBubble({
            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);
    }

    function addInfoWindow() {
        // uses GMapPanel `addMarker` method to create a marker and attached it to tree.
        // Detailes - look at the source code of GMapPanel
        var 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);
                }
            }
        });

    }

    function findRoute() { //gets the directions

        var from = 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');
            }
        });

    }

    function resetFields() {   //clears off all directions
        Ext.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.js"></script>
<script src="https://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-info-bubble/gh-pages/src/infobubble.js"></script>
<link href="https://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet"/>

<div id='ext-map'></div>
<div id='directions'></div>