How do I show one kml layer when the page is loaded? - google-maps-api-3

Question

I have a page with a google maps that shows several kml files that can be seen when you click on the checkboxes in the legend.
How can I configure the map so that when the page is loaded I see only layer2 as though it had already been clicked?
The source code is:
<script type="text/javascript">
var map;
var layers = [];
function initialize() {
var myLatLng = new google.maps.LatLng(37.18186,-3.58843);
var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var legend = document.getElementById('legend');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push
(document.getElementById('legend'));
var noPoi = [
{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({styles: noPoi});
layers [0] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/L33-2018.kml',
{preserveViewport: true, suppressInfoWindows: false});
layers [1] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/C31-2018.kml',
{preserveViewport: true, suppressInfoWindows: false});
layers [2] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/C34-2018.kml',
{preserveViewport: true, suppressInfoWindows: false});
layers [3] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/C30-2018.kml',
{preserveViewport: true, suppressInfoWindows: false});
for (var i = 0; i < layers.length; i++) {
layers[i].setMap(null);
}
}
function toggleLayer(i) {
if (layers[i].getMap() === null) {
layers[i].setMap(map);
}
else {
layers[i].setMap(null);
}
}
</script>
and the html code is:
<div id="map_canvas"></div>
<div id="legend">
<p>
<input type="checkbox" id="layer0" onClick="toggleLayer(0)"/> Bus 33<br />
<input type="checkbox" id="layer1" onClick="toggleLayer(1)"/> Bus C31<br />
<input type="checkbox" id="layer2" onClick="toggleLayer(2)"/> Bus C34<br />
<input type="checkbox" id="layer3" onClick="toggleLayer(3)"/> Bus C30<br />
</div>

Answer 1

You need to do two things:
set the default checkbox to "checked".
<input type="checkbox" id="layer2" onClick="toggleLayer(2)" checked="checked"/> Bus C34<br />
call the toggleLayer function for the layer you want displayed.
Bus C34
toggleLayer(2);
proof of concept fiddle
code snippet:
var map;
var layers = [];
function initialize() {
var myLatLng = new google.maps.LatLng(37.18186, -3.58843);
var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var legend = document.getElementById('legend');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('legend'));
var noPoi = [{
featureType: "poi",
stylers: [{
visibility: "off"
}]
}];
map.setOptions({
styles: noPoi
});
layers[0] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/L33-2018.kml', {
preserveViewport: true,
suppressInfoWindows: false
});
layers[1] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/C31-2018.kml', {
preserveViewport: true,
suppressInfoWindows: false
});
layers[2] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/C34-2018.kml', {
preserveViewport: true,
suppressInfoWindows: false
});
layers[3] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/C30-2018.kml', {
preserveViewport: true,
suppressInfoWindows: false
});
for (var i = 0; i < layers.length; i++) {
layers[i].setMap(null);
}
toggleLayer(2);
google.maps.event.addListener(layers[2], 'defaultviewport_changed', function() {
map.fitBounds(layers[2].getDefaultViewport())
});
}
function toggleLayer(i) {
if (layers[i].getMap() === null) {
layers[i].setMap(map);
} else {
layers[i].setMap(null);
}
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map_canvas {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map_canvas"></div>
<div id="legend">
<p>
<input type="checkbox" id="layer0" onClick="toggleLayer(0)" /> Bus 33<br />
<input type="checkbox" id="layer1" onClick="toggleLayer(1)" /> Bus C31<br />
<input type="checkbox" id="layer2" onClick="toggleLayer(2)" checked="checked" /> Bus C34<br />
<input type="checkbox" id="layer3" onClick="toggleLayer(3)" /> Bus C30<br />
</p>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>