title: Clear Polyline from Google Maps and then restart it
body: <p>I am playing around with the Google Maps API v3 for a project I am building.The premise is the user can draw a route on the map however at any point can clear it and start again. The issue I am having is restarting the polyline after the map has been cleared. Whilst the markers appear the polyline does not.</p>
  
  <p>I have discovered that the line poly.setMap(null); only hides the polyline that is draw and doesn't clear it therefore it is understandable why the line doesn't show. However on finding this out I now need to know how to clear it and how it can be restarted.</p>
  
  <p>The code is below:</p>
  
  <pre><code>var poly;
  
  var map, path = new google.maps.MVCArray(),
      service = new google.maps.DirectionsService(), poly;
  var removepolyline;
  var geocoder;
  var bounds = new google.maps.LatLngBounds();
  var markersArray = [];
  
  var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=D|FF0000|000000';
  var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=O|FFFF00|000000';
  var count = 0;
  var countname = 0;
  
  var latitude_start;
  var longitude_start;
  
  
  
  
  function initialize() {
    var mapOptions = {
      zoom: 16,
  
    };
  
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    geocoder = new google.maps.Geocoder();
    ///Geolocation
  
      // Try HTML5 geolocation
    if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);
  
        var infowindow = new google.maps.InfoWindow({
          map: map,
          position: pos,
          content: 'Current Location'
        });
  
        map.setCenter(pos);
      }, function() {
        handleNoGeolocation(true);
      });
    } else {
      // Browser doesn't support Geolocation
      handleNoGeolocation(false);
      ///Place fallback loop
    }
  
  
  
    ///Allows the polyline to follow the road
  
    poly = new google.maps.Polyline({ map: map });
    google.maps.event.addListener(map, "click", function(evt) {
  
      if (path.getLength() === 0) {
      //Enters on first click
  
        path.push(evt.latLng);
        poly.setPath(path);
      } else {
      //Enters on second click
        service.route({
          origin: path.getAt(path.getLength() - 1),
          destination: evt.latLng,
  
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function(result, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            for (var i = 0, len = result.routes[0].overview_path.length;
                i &lt; len; i++) {
              path.push(result.routes[0].overview_path[i]);
  
            }
          }
        });
      }
  
  
      var latitude_longitude = evt.latLng;
      var latitude = evt.latLng.lat();
      var longitude = evt.latLng.lng();
      //alert(latitude_longitude);
      //alert(latitude);
  //  alert(longitude);
  
  
      ///Saves the first click location
  if(count === 0){
          var latitude_start = evt.latLng.lat();
          var longitude_start = evt.latLng.lng();
  
          var firstlat = latitude_start;
          var firstlng = longitude_start;
  
      /////Trying to calculate distance
      var origin1 = new google.maps.LatLng(firstlat, firstlng);///1st click - never changes
      document.getElementById("origin1").value = origin1;
      document.getElementById("startpoint").value = origin1;
  
      ////Calculate distance
      var destinationA = new google.maps.LatLng(latitude, longitude); ///Most recent click
      document.getElementById("destination").value = destinationA; ////Stores Destination
  
      var origin1 = document.getElementsByName('origin1')[0].value ////Retrieves value from text box 
  
  
           count ++;
  }else{
  
      var origin1 = document.getElementsByName('destination')[0].value ////Retrieves value from text box 
  
      ////Calculate distance
      var destinationA = new google.maps.LatLng(latitude, longitude); ///Most recent click
      document.getElementById("destination").value = destinationA; ////Stores Destination
  
  
  
  
  
  }
  
                  ////Calculate distance
                  var servicetime = new google.maps.DistanceMatrixService();
                    servicetime.getDistanceMatrix(
                      {
                        origins: [origin1],
                        destinations: [destinationA],
                        travelMode: google.maps.TravelMode.DRIVING,
                        unitSystem: google.maps.UnitSystem.METRIC,
  
                      }, callback);
  
    });
  
  
                  function callback(response, status) {
                    if (status != google.maps.DistanceMatrixStatus.OK) {
                      alert('Error was: ' + status);
                    } else {
  
                      var origins = response.originAddresses;
                      ///Enters the if it is the first loop round/first click
                      if(countname === 0){
                          document.getElementById("startpointname").value = origins;
                          countname ++;
                      }
                      var destinations = response.destinationAddresses;
  
  
                      var outputDiv = document.getElementById('outputDiv');
  
                      outputDiv.innerHTML = '';
  
                      //deleteOverlays(); ////
                      for (var i = 0; i &lt; origins.length; i++) {
  
  
                        var results = response.rows[i].elements;
                        //addMarker(origins[i], false);
  
                        for (var j = 0; j &lt; results.length; j++) {
  
                          outputDiv.innerHTML += start + ' to ' + destinations[j]
                              + ': ' + miles + ' miles in '
                              + overalltime + ' minutes &lt;br&gt;';
  
                        }
                      }
                    }
                  }
  
  
  
    // Add a listener for the click event
    google.maps.event.addListener(map, 'click', addLatLng);
  }////Function initialize ends here
  
  
  
  function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
      var content = 'Error: The Geolocation service failed.';
    } else {
      var content = 'Error: Your browser doesn\'t support geolocation.';
    }
  
    var options = {
      map: map,
      position: new google.maps.LatLng(60, 105),
      content: content
    };
  
    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
  }
  
  
  
  
  /**
   * Handles click events on a map, and adds a new point to the Polyline.
   * @param {google.maps.MouseEvent} event
   */
  
  function addLatLng(event) {
  
    // Add a new marker at the new plotted point on the polyline.
    var marker = new google.maps.Marker({
      position: event.latLng,
      title: '#' + path.getLength(),
  
      map: map
  
    });
  
    markersArray.push(marker);
  
  }///Function addLatLng ends here
  
  
  
  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
  
  for (var i = 0; i &lt; markersArray.length; i++) {
                      markersArray[i].setMap(null);
                    }
  
  }
  
  
  function clearall() {
  
      poly.setMap(null);//Just hiding them
  
        clearMarkers();
        markersArray = [];
   ///////////////////CLEAR ALL VALUES IN HERE i.e. miles, time etc and CLEAR MARKERS
  
       restartpolyline();
  
  }
  
  
  //////////////////////////////////////////WHEN CLEARED THE CODE NEEDS INTITALISING AGAIN
  function  restartpolyline(){
  //alert("Restart");
  
  
  
  }
  
  //https://developers.google.com/maps/documentation/javascript/reference#Polyline
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>To view what currently happens view the following link: <a href="http://kitlocker.com/sotest.php" rel="nofollow">http://kitlocker.com/sotest.php</a></p>