Click here to Skip to main content
14,239,046 members
Rate this:
Please Sign up or sign in to vote.
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);
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100