Question

I have a bit of difficulty to clear the data from the Google Maps API after someone issues a new request for directions.

Let me explain the situation: A user comes to the site and decides to get the route to our location. The user fills in the location where he or she is right now. The user gets the data just fine, but the problem is that when he/she enters a new location the old directions stay in the panel. I figured out that to clear it you can use this line of code.

directionsDisplay.setPanel(null);

The problem I have with this, is that I can’t figure out where to place it within the code(yes I am new to js).

Here is what I have so far:

function calculateDirections(locFrom, locTo) {
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
    var mapContainer = $('#contactInfo');
    var mapPanel = $('#mapPanel');
    var request = {
        origin: locFrom,
        destination: 'Address 01, City',
        travelMode: google.maps.TravelMode.DRIVING
    };
    var myOptions = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: locFrom
    };

    directionsService.route(request, function(result, status) {
        if(status == google.maps.DirectionsStatus.OK) {
            // Build frame
            var map = new google.maps.Map(document.getElementById('maps'), myOptions);  
            directionsDisplay.setPanel(document.getElementById("mapPanel"));
            directionsDisplay.setDirections(result);
            directionsDisplay.setMap(map);
            $('#contactInfo').css('top', '30px');
            $('#contactInfo').css('padding-bottom', '15px');
        }
        else {
            alert('Could not calculate route');
        }
    });
}

I figured, I would start with the directionsDisplay.setPanel(null); and after that load the data, so that in each iteration you start with clearing the data. However i am in over my head with this assignment. Help would be much appreciated.

EDIT:

For the record, the application has 1 fixed point(The location of our business) and the locFrom is the location from the user(this can be anywhere).

EDIT:

Here is the markup:

<div id="maps"></div>
   <div id="menu">
    <div class="contentWrapperLeft"></div>
    <div id="contactInfoRoute">
        <h2>Route</h2>          
                <input type="text" name="street" id="street" rel="Straat">
        <input type="text" name="place" id="place" rel="Plaats">
        <input type="button" name="submit" id="submit" value="Route">
    </div>

        <div id="contactInfo"> 
            <div id="mapPanel"></div>
            <p>Address 01 <br /> City, Country</p> 
        </div>
    </div>

Answer 1

The solution I came up with is as follows:

What i did was to write an empty mapPanel div before the request was
made like this:

mapPanel.html('');

I put this line above the variable ‘map’ and that made it work without any problems.