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.

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.

The code is below:

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 = ';chld=D|FF0000|000000';
var originIcon = ';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 < 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 < origins.length; i++) {


                      var results = response.rows[i].elements;
                      //addMarker(origins[i], false);

                      for (var j = 0; j < results.length; j++) {

                        outputDiv.innerHTML += start + ' to ' + destinations[j]
                            + ': ' + miles + ' miles in '
                            + overalltime + ' minutes <br>';

                      }
                    }
                  }
                }



  // 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 < 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");



}

//

google.maps.event.addDomListener(window, 'load', initialize);

To view what currently happens view the following link: .php

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.

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.

The code is below:

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./chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis./chart?chst=d_map_pin_letter&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 < 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 < origins.length; i++) {


                      var results = response.rows[i].elements;
                      //addMarker(origins[i], false);

                      for (var j = 0; j < results.length; j++) {

                        outputDiv.innerHTML += start + ' to ' + destinations[j]
                            + ': ' + miles + ' miles in '
                            + overalltime + ' minutes <br>';

                      }
                    }
                  }
                }



  // 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 < 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./maps/documentation/javascript/reference#Polyline

google.maps.event.addDomListener(window, 'load', initialize);

To view what currently happens view the following link: http://kitlocker./sotest.php

• javascript
• api
• google-maps
• google-maps-api-3

• It appears you have a lot of unnecessary code that isn't related to the problem. Try to create a Minimal, Complete, and Verifiable example. – Erik Philips Commented Jan 22, 2015 at 18:10

2 Answers 2

Instead of poly.setMap(null); call path.clear();

Polyline is just an array of LatLng objects, not individual Polylines, which you can then loop over to remove them all.

You can make it invisible or remove it from the map by looping it like this:

var size = poly.length;

for (i=0; i<size; i++) 
{                           
  poly[i].setMap(null);
}