Google Maps modify/remove populated polylines

Question

I am working with Google maps API(latest). So far, i can able to create and removing(on add operation) route with the help of polylines and markers.

Problem is when i try to modify(on update mode) the maps populates(dynamically) the route which i saved but if try to remove/modify existing route the marker removes but polyline dont.

tried poly.setMap(null);. but doesn't work.

on page load :

after removing any marker : (the last one got removed)

And you can see marker has been removed but polyline is still there

CODE(not working on fiddle):

var poly;
var map;
var markers = new Array();

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 24.926294,
      lng: 67.022095
    } // Center the map on Pakistan.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // if update/edit model populate map dynamically
  populateLatLng();

  // Add a listener for the click event
  map.addListener('click', addLatLng);

  map.addListener('click', function() {
    getPathVariableCode(poly);
  });
}

function populateLatLng() {
  var path = '[{"lat":24.96078338154793,"lng":67.10892827306634},{"lat":24.934323836524374,"lng":67.07047612462884},{"lat":24.926851877301345,"lng":67.08111912999993},{"lat":24.90816999805268,"lng":67.06669957433587},{"lat":24.917822655664953,"lng":67.0519366959179},{"lat":24.911102310371437,"lng":67.03740863310293}]' //dynamic array
  path = JSON.parse(path);

  for (k = 0; k < path.length; k++) {

    var marker = new google.maps.Marker({
      position: path[k],
      title: '#' + k,
      map: map
    });

    markers.push(marker);

    poly = new google.maps.Polyline({
      path: path,
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    poly.setMap(map);

    google.maps.event.addListener(marker, 'click', function(event) {
      removePoint(marker);
    });
  }
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  console.log("event", event);
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

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

  markers.push(marker);

  console.log(markers.length - 1, event.latLng);
  poly.getPath().setAt(markers.length - 1, event.latLng);
  google.maps.event.addListener(marker, 'click', function(event) {
    removePoint(marker);
  });
}

function getPathVariableCode(line) {
  var getLocation = '';
  var locationArr = [];
  var pathArr = line.getPath();
  for (var i = 0; i < pathArr.length; i++) {
    var codeStr = [];
    codeStr = {
      'lat': pathArr.getAt(i).lat(),
      'lng': pathArr.getAt(i).lng()
    };
    locationArr.push(codeStr);
    document.getElementById('locationCordinates').value = JSON.stringify(locationArr);
  }
};

function removePoint(marker) {

  for (var i = 0; i < markers.length; i++) {
    if (markers[i] === marker) {
      markers[i].setMap(null);
      markers.splice(i, 1);
      poly.getPath().removeAt(i);
      getPathVariableCode(poly);

    }
  }
}

#map {
  height: 200px;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>

Answer 1

Your code is quite problematic but I was able to successfully get a simplified working version of what you're trying to achieve here (if I understood correctly).

Try the code below. Just click on the map to add markers and then click on those markers to remove both the markers and their corresponding lines.

var poly;
var map;
var markers = new Array();

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {
            lat: 24.926294,
            lng: 67.022095
        } // Center the map on Pakistan.
    });

    poly = new google.maps.Polyline({
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3
    });
    poly.setMap(map);

    // Add a listener for the click event
    map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event, path = false) {
    console.log("event", event);
    var path = poly.getPath();

    // Because path is an MVCArray, we can simply append a new coordinate
    // and it will automatically appear.
    path.push(event.latLng);

    // 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,
        id: new Date()
    });

    markers.push(marker);

    console.log(markers.length - 1, event.latLng);
    poly.getPath().setAt(markers.length - 1, event.latLng);
    google.maps.event.addListener(marker, 'click', function(event) {
        removePoint(marker);
    });
}

function removePoint(marker) {
    for (var i = 0; i < markers.length; i++) {
        if (markers[i].id === marker.id) {
            markers[i].setMap(null);
            markers.splice(i, 1);
            poly.getPath().removeAt(i);
        }
    }
}

I hope this helps point you in the right direction.