The correct way to hide a polyline? - google-maps-api-3

Question

I´ve a function that show a polyline on a map, this part is working, now I want to implement a function that hides the polyline, but I can´t find my mistake, thanks in advance.
function cargaMapaCYL(mapa, varControl){
var limite = null;
limite = [
new google.maps.LatLng(42.49956716,-7.019005501),
new google.maps.LatLng(42.49947126,-7.029286373),
new google.maps.LatLng(42.50904062,-7.049299123),
new google.maps.LatLng(42.50722622,-7.069103626),
new google.maps.LatLng(42.50452387,-7.000150672),
new google.maps.LatLng(42.49348015,-6.983058917),
new google.maps.LatLng(42.49843269,-6.971666546),
new google.maps.LatLng(42.51765791,-6.956909023),
new google.maps.LatLng(42.52010069,-6.927429186),
new google.maps.LatLng(42.50992238,-6.914231493),
new google.maps.LatLng(42.50096695,-6.879679821),
new google.maps.LatLng(42.48775868,-6.857775832),
new google.maps.LatLng(43.23907504,-3.293216584)], "#000000", 5);
var contorno= new google.maps.Polyline({
path: limite,
strokeColor: "#000000",
strokeOpacity: 1.0,
strokeWeight: 2
});
if(varControl==true){
contorno.setMap(mapa);
}
if(varControl==false){
contorno.setMap(null);
}
}

Answer 1

You only need to create the Polyline once. Put it into a global var contorno = ... Then you can create a toggle function using the setVisible(boolean) method.
if(contorno.getVisible()){
contorno.setVisible(false);
else{
contorno.setVisible(true);
}
// or
contorno.getVisible() ? contorno.setVisible(false) : contorno.setVisible(true);
Blow is an example which hides the path after 3 seconds.
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: 'terrain'
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
setTimeout(function() {
alert('hide path');
flightPath.setVisible(false);
}, 3000);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Answer 2

Everytime your function is called, it creates a new polyline. Which is either added to the map or not.
Persumably you want be able to call the function once with true to add the line, then again with false to remove it. At the moment, when you call it a second time, its creates a new line and doesn't add it to the map. It does not touch the original line, already added to the map.
One way is too keep the line in a global variable. Then you can refer to the exact same object between calls.
var contorno = null;
function cargaMapaCYL(mapa, varControl){
if (!contorno) {
var limite = [...], "#000000", 5);
contorno= new google.maps.Polyline({...});
}
if(varControl){
contorno.setMap(mapa);
} else {
contorno.setMap(null);
}
}