Add multiple polylines to a single Array

Question

I´m new working on Maps API V3, but I can´t find a way to put multiple polylines inside one array, so I can make them show/hide with a button (all at once). This is my code.

// Setup the click event listener: simply set the map to center on Bogota

var bogota = new google.maps.LatLng(4.697316, -74.044805);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

// FUNCION INICIALIZE

function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer();
   map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    // passing in this DIV.
        var botonesDiv = document.createElement('div');
        var espacioControles = new Controles(botonesDiv, map);
                botonesDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(botonesDiv);   

    // Ingresamos las lineas de la CICLORUTAS
    // Son de color rojo
          var ColorViaCR = "#FF0000";
          var OpacidadCR = 1.0;
          var GrosorCR = 2;
          var CRArray = []; 


          var CiclorutasCoordinates116 = [
            new google.maps.LatLng(4.698555, -74.049835),
            new google.maps.LatLng(4.698437, -74.049004),
            new google.maps.LatLng(4.696328, -74.043339)
          ];
          var Cicloruta116 = new google.maps.Polyline({
            path: CiclorutasCoordinates116,
            strokeColor: ColorViaCR,
            strokeOpacity: OpacidadCR,
            strokeWeight: GrosorCR
          });
          CRArray.push(Cicloruta116);

          var CiclorutasCoordinates112 = [
            new google.maps.LatLng(4.696723396389598, -74.05013248790056),
            new google.maps.LatLng(4.696632507503862, -74.04982671607286),
            new google.maps.LatLng(4.696480134933544, -74.04946461785585),
            new google.maps.LatLng(4.687099216812973, -74.03546721674502),
            new google.maps.LatLng(4.687072484420475, -74.03525800444186)
          ];
          var Cicloruta112 = new google.maps.Polyline({
            path: CiclorutasCoordinates112,
            strokeColor: ColorViaCR,
            strokeOpacity: OpacidadCR,
            strokeWeight: GrosorCR
          });
          CRArray.push(Cicloruta112);

             directionsDisplay.setMap(map);

} 

// FIN DE INITIALIZE

// SHOW/HIDE POLYLINES

function showCR() {
  for (var i=0; i< CRArray.length; i++) {
    if(CRArray[i].getMap(map)) { 
    CRArray[i].setMap(null); 
 } else { 
    CRArray[i].setMap(map);
 } 
  }
}

// CREATE BUTTON

function Controles(DivGeneral, mapa) {

    // Set CSS for the control border.
    var InfoUI = document.createElement('div');
    InfoUI.style.backgroundColor = 'white';
    InfoUI.style.borderStyle = 'solid';
    InfoUI.style.borderWidth = '1pt';
    InfoUI.style.borderColor = '#CCC';
    InfoUI.style.cursor = 'pointer';
    InfoUI.style.textAlign = 'left';
    InfoUI.title = 'Ver Ciclorutas';
    InfoUI.style.marginTop = '2px';
    DivGeneral.appendChild(InfoUI);

    // Set CSS for the control interior.
    var InfoText = document.createElement('div');
    InfoText.style.fontFamily = 'Arial,sans-serif';
    InfoText.style.color = '#000';
    InfoText.style.fontSize = '12px';
    InfoText.style.paddingLeft = '8px';
    InfoText.style.paddingRight = '8px';
    InfoText.style.paddingTop = '12px';
    InfoText.style.paddingBottom = '12px';
    InfoText.innerHTML = '<strong>Ver Ciclorutas</strong>';
    InfoUI.appendChild(InfoText);

    google.maps.event.addDomListener(InfoUI, 'click', function() {
          showCR();
     });

}     

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

</script>

Answer 1

I think the answer lies in where you have defined CRArray.

By defining CRArray inside of initialize(), you've set the scope of the array to be inside of that function. To access CRArray inside of other functions, the easiest way is to define it in the global scope (move var CRArray outside of initialize().)

Try the following code instead:

var CRArray = new Array();

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

// passing in this DIV.
    var botonesDiv = document.createElement('div');
    var espacioControles = new Controles(botonesDiv, map);
            botonesDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(botonesDiv);   

// Ingresamos las lineas de la CICLORUTAS
// Son de color rojo
      var ColorViaCR = "#FF0000";
      var OpacidadCR = 1.0;
      var GrosorCR = 2;



      var CiclorutasCoordinates116 = [
        new google.maps.LatLng(4.698555, -74.049835),
        new google.maps.LatLng(4.698437, -74.049004),
        new google.maps.LatLng(4.696328, -74.043339)
      ];
      var Cicloruta116 = new google.maps.Polyline({
        path: CiclorutasCoordinates116,
        strokeColor: ColorViaCR,
        strokeOpacity: OpacidadCR,
        strokeWeight: GrosorCR
      });
      CRArray.push(Cicloruta116);

      var CiclorutasCoordinates112 = [
        new google.maps.LatLng(4.696723396389598, -74.05013248790056),
        new google.maps.LatLng(4.696632507503862, -74.04982671607286),
        new google.maps.LatLng(4.696480134933544, -74.04946461785585),
        new google.maps.LatLng(4.687099216812973, -74.03546721674502),
        new google.maps.LatLng(4.687072484420475, -74.03525800444186)
      ];
      var Cicloruta112 = new google.maps.Polyline({
        path: CiclorutasCoordinates112,
        strokeColor: ColorViaCR,
        strokeOpacity: OpacidadCR,
        strokeWeight: GrosorCR
      });
      CRArray.push(Cicloruta112);

         directionsDisplay.setMap(map);

}