Google map with marker cluster - add toggle button (KML) not working

See more:

Javascript

Google-Maps

I have a base map using marker cluster feature and wanted to add another map with toggle buttons (KML layer).

After hours of trying and changing the code here and there still unable to get it work. ie. base map is working, toggle layer button when clicked not working.

I have appended below my codes, very sorry for the messiness of formatting as i am learning the codes and attempted many trial and error.

My project work can be found at this url: https://360.yo.fr/mapcluster/koh

Can someone enlighten me what went wrong with my code?

Thank you so much.

What I have tried:

<pre>//----------------google.maps.event.addDomListener(window, 'load', speedTest.init);
  var map = null;
var geocoder = new google.maps.Geocoder();

var layers=[];
layers[0] = new  google.maps.KmlLayer("https://www.google.com/maps/d/kml?mid=11L4VsN2gl3JG5ORhce3-L1-M5QkZWIGR", {preserveViewport: true});layers[1] = new  google.maps.KmlLayer("https://www.google.com/maps/d/kml?mid=1EafZzDb4pL4J52bnrjjOjMOVmwDSPn9u", {preserveViewport: true}); 
function toggleLayers(i)    {
    if(layers[i].getMap()==null){
       layers[i].setMap(map);
    }
    else {
       layers[i].setMap(null);
    }
}

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}


  //----------------------------var map;function initialize() {
  var latLng = new google.maps.LatLng(1.525420, 103.712070);
  var markerPosition = new google.maps.LatLng(1.525420, 103.712070);
 var image = 'https://360.yo.fr/mapcluster/images/marker1.png'; //custom marker path

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: latLng,
    icon: image,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
 var marker = new google.maps.Marker({
    position: markerPosition,
    title: 'Point A',
    map: map,
    icon: image,// customer marker
    draggable: true
  });

  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);

  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('DRAGGING...');
  });

  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('DRAGGING...');
    updateMarkerPosition(marker.getPosition());
  });

  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY');
    geocodePosition(marker.getPosition());
  }); //  google.maps.event.addDomListener(window, 'load', initialize);
 google.maps.event.addDomListener(window, 'load', speedTest.init);