cant clear directions after generating new ones..

[pgarnek]

Hello, i'ce got code: `function inicjacja_mapy(attr) { //console.log(attr); var zoom = attr.zoom !== undefined ? attr.zoom : 13; var tytul = attr.tytul !== undefined ? attr.tytul : "Restauracja Boguszyn"; var szerokosc = attr.szerokosc !== undefined ? attr.szerokosc : "100%"; var wysokosc = attr.wysokosc !== undefined ? attr.wysokosc : "350px"; kontener = '.gmap3-container';

koordynaty = attr.koordynaty !== undefined ? attr.koordynaty: "50.4702167,16.6950877";
koordynaty = koordynaty.split(',');
koordynaty = [ parseFloat(koordynaty[0]) , parseFloat(koordynaty[1]) ];
//console.log(koordynaty);

$(kontener)
    .gmap3({
        key: 'AIzaSyDl0l5HwPxStCoDw_WfX9adJF4n7HqEDAc',
        center: koordynaty,
        zoom: zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: false,
        scrollwheel: false,
        draggable: false,
        overviewMapControl: true
    })
    .marker([
        {position: koordynaty, icon: "http://maps.google.com/mapfiles/marker_grey.png"}
    ])
    .on('click', function (marker) {
        marker.setIcon('http://maps.google.com/mapfiles/marker_green.png');
    });

}`

and on click function to render directions after typing in input field: `$(document).ready(function(){ $('#get-directions-btn').click(function () { $(kontener).gmap3({clear: 'directionRenderer'}); $(".direction-info").html(''); // czyści wskazówki $(kontener).gmap3({action: "clear", name: "directionRenderer"}); $(kontener).gmap3({clear: {}});

    $(kontener).gmap3()
        .route({
          origin: $('#gmaps-directionfrom-adress').val(),
          destination: koordynaty.toString(),
          travelMode: google.maps.DirectionsTravelMode.DRIVING,
          region: 'pl'
        })
        .directionsrenderer(function (results) {
            if (results) {
                return {
                    panel: $("<div></div>").addClass("gmap3").insertAfter($('#map-and-directions')), // accept: string (jQuery selector), jQuery element or HTML node targeting a div
                    //container: ".direction-info",
                    directions: results,
                };
                //$(".direction-info").html(this.panel);
            }
        });
    return false;
});

});`

my problem is, in previous version of gmap3 everyting works properly, on new one directions won't clear after generating new ones. my website is here: http://ogrodzenia.klodzko.pl/dojazd-i-kontakt/

any advices, how to clear directions before getting new ones?

[pgarnek]

still don't know how to clear previous directions after generating new ones. I mean, i see old route on map and new route too. need some help :/

[JoseVelasco142]

i too have the same problem, on view, initially, load a clean map centered on coortinates selected and with optimal zoom. After, the user can create a route point to point or select origin point and multiples waypoints. The individual routes are redender fine, but when i try generate another route, the last or last routes still drawed on the map. I read gmap3 API and so much page and say that the code wrotten for pgarnek is ok, but not.

This is part of the code:

function generateRoute(origin, destination, list){
            var map = $('#map');
            map .gmap3({ action: 'clear', name: 'directionRenderer' });
            setTimeout(function(){
                if (list == undefined) {
                    map.gmap3().route({
                        origin: origin,
                        destination: destination,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    }).directionsrenderer(function (results) {
                        if (results) {
                            return {
                                panel: "#mCSB_2_container",
                                directions: results
                            }
                        } else {
                            alertify.error("Alguna de las direcciones no es lo suficientemente específica");
                        }
                    });
                } else {
                    var dest = list[list.length-1];
                    finalList = list.splice(-1, 1);
                    map.gmap3().route({
                        origin: exit,
                        waypoints: finalList ,
                        destination: dest.location,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    }).directionsrenderer(function (results) {
                        if (results) {
                            return {
                                panel: "#mCSB_2_container",
                                directions: results
                            }
                        } else {
                            alertify.error("Alguna de las direcciones no es lo suficientemente específica");
                        }
                    });
                }
            }, 1500);
}

[damianthepichler]

I have the same Problem

` function renderDirections(startPoint) {

    $arrivalMap.gmap3().route({
        origin: startPoint,
        destination: destinationCoordinates,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    })
    .directionsrenderer(function (results) {

        $arrivalBlock.addClass('arrival-directions-shown');

        if (results) {

            $arrivalBlock.removeClass('arrival-directions-no-result');
            $arrivalRouteDescription.html('');

            return {
                panel: '.js-route-description',
                directions: results,
                suppressMarkers: true
            };

        } else {
            $arrivalBlock.addClass('arrival-directions-no-result');
        }

    });

}`

[JonaBrackenwood]

I've found a solution to this problem:

Step 1. Keep track of the directionsrender

$('#Map').gmap3().route({
     // Create a route
     origin: orig,
     waypoints: wps,
     destination: dest,
     travelMode: google.maps.DirectionsTravelMode.DRIVING
}).directionsrenderer(
     // Show route on the map
     function (results) {
          if (results) return { directions: results };
     }
).then(function (directions) {
     // To get rid of the existing route on the next request, we need to keep track of it
     lastDirections = directions;
});

Step 2. Clear the map on the directionsrenderer when needed

if (typeof $('#Map').gmap3().get(0) !== 'undefined') {
     // Remove previous route
     if (typeof lastDirections !== "undefined") lastDirections.setMap(null);
}

[damianthepichler]

@JonaBrackenwood Thanks! This should be in the documentation.