私は Maps API V3 に取り組んでいますが、複数のポリラインを 1 つの配列内に配置する方法が見つからないため、ボタンで (一度に) 表示/非表示にすることができます。これは私のコードです。
// クリック イベント リスナーをセットアップします。ボゴタを中心にマップを設定するだけです。
var bogota = new google.maps.LatLng(4.697316, -74.044805);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
// 関数の初期化
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
// ポリラインを表示/非表示
function showCR() {
for (var i=0; i< CRArray.length; i++) {
if(CRArray[i].getMap(map)) {
CRArray[i].setMap(null);
} else {
CRArray[i].setMap(map);
}
}
}
// ボタンを作成
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>