谷歌地图切换层开始

Question

http://deepfrogphoto.com/Brett-Pelletier-Photography/Links/maps/wasatch/index07.html

My page above is working fine, but I would really like it if the black and white map kml layer would start as being off forcing the user to toggle it on. I have a lot going on with this map and I'm pretty lost with all the code. If you go to my site and click the layer button the first option is the BW MAP toggle. I just want the page to load with the BW MAP kml layer off. I've tried several of the options I found on this site, but still just trial and error with no luck.... I think this is most of the code you might need to help...

EDIT - it might be easier to 'not accept' the geolocation so you can see what is going on where I'm at. the map will load in the area without it enabled....

var map, GeoMarker;

function HomeControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to GPS Center';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '11px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home</b>';
controlUI.appendChild(controlText);

google.maps.event.addDomListener(controlUI, 'click', function() {
recenterMapOnGeoLoc()
});
}

function toggleLayer(this_layer) {
if (this_layer.getMap()) {
this_layer.setMap(null)
} else {
this_layer.setMap(map);
}
}

function recenterMapOnGeoLoc() {
map.setCenter(GeoMarker.getPosition());
}

function initialize() {
var mapDiv = document.getElementById('map_canvas');
var mapOptions = {
zoom: 20,
center: new google.maps.LatLng(40.563855, -111.675426),
mapTypeId: google.maps.MapTypeId.TERRAIN
};

map = new google.maps.Map(mapDiv, mapOptions);

GeoMarker = new GeolocationMarker();
GeoMarker.setCircleOptions({
fillColor: '#EBF4FA'
});

google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
map.setCenter(this.getPosition());
map.fitBounds(this.getBounds());
});

google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
alert('There was an error obtaining your position. Message: ' + e.message);
});

GeoMarker.setMap(map);

trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

layer1 = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
select: "skilines",
from: "1R5pCEyNN74N8Dt9MkfNXA6A9D1HbQESzOR1fYFa7",
 where: ""
 },
options: {
styleId: 2,
templateId: 2
}
});


layer2 = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
from: "19iu58FDFcBIZZ-wU1iZcf89AI5ABDJ7YTv355su5",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});

layer3 = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
select: "summerhiking",
from: "1t1XNnG7J7Zu1p5mIUpm6qIGVYwzhkCgPy_je0IKr",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});


layer5 = new google.maps.KmlLayer('http://deepfrogphoto.com/Brett-Pelletier-            Photography/Links/maps/kml/topobwkml.kml',
              {
                  suppressInfoWindows: true,
                  map: map,
                  preserveViewport: true
              });  

                                // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);     

}

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

if (!navigator.geolocation) {
alert('Your browser does not support geolocation');
}

  //////////////And the menu code is....

  <li><a><input checked="checked" id="show_hide_layer5" onchange="toggleLayer(layer5)"      type="checkbox" value="ON" /> B+W Map</a> </li>
            <li><a><input checked="checked" id="show_hide_layer1" onchange="toggleLayer(layer1)"   type="checkbox" value="ON" /> Backcountry Ski Lines</a> </li>
            <li><a><input checked="checked" id="show_hide_layer2" onchange="toggleLayer(layer2)" type="checkbox" value="ON" /> Resort Lifts</a> </li>
                            <li><a><input checked="checked" id="show_hide_layer3" onchange="toggleLayer(layer3)" type="checkbox" value="ON" /> Summer Trails</a> </li>
                            <li><a><input checked="checked" id="show_hide_layer4" onchange="toggleLayer(layer4)" type="checkbox" value="ON" /> Snow Stations</a> </li>
                            <li><a><input checked="checked" id="show_hide_layer4" onchange="toggleLayer(trafficLayer)" type="checkbox" value="ON" /> Traffic</a> </li>"

Answer 1

If you don't want your layers displayed when you create them, don't add them to the map (remove the {map: map} property (and don't set the checkboxes to "checked").

 var map, GeoMarker, layer1, layer2, layer3, layer4, layer5; function HomeControl(controlDiv, map) { controlDiv.style.padding = '5px'; var controlUI = document.createElement('div'); controlUI.style.backgroundColor = 'white'; controlUI.style.borderStyle = 'solid'; controlUI.style.borderWidth = '1px'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlUI.title = 'Click to set the map to GPS Center'; controlDiv.appendChild(controlUI); var controlText = document.createElement('div'); controlText.style.fontFamily = 'Arial,sans-serif'; controlText.style.fontSize = '11px'; controlText.style.paddingLeft = '4px'; controlText.style.paddingRight = '4px'; controlText.innerHTML = '<b>Home</b>'; controlUI.appendChild(controlText); google.maps.event.addDomListener(controlUI, 'click', function() { recenterMapOnGeoLoc() }); } function toggleLayer(this_layer) { if (this_layer.getMap()) { this_layer.setMap(null) } else { this_layer.setMap(map); } } function recenterMapOnGeoLoc() { map.setCenter(GeoMarker.getPosition()); } function initialize() { var mapDiv = document.getElementById('map_canvas'); var mapOptions = { zoom: 20, center: new google.maps.LatLng(40.563855, -111.675426), mapTypeId: google.maps.MapTypeId.TERRAIN }; map = new google.maps.Map(mapDiv, mapOptions); GeoMarker = new GeolocationMarker(); GeoMarker.setCircleOptions({ fillColor: '#EBF4FA' }); google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() { map.setCenter(this.getPosition()); map.fitBounds(this.getBounds()); }); google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) { alert('There was an error obtaining your position. Message: ' + e.message); }); GeoMarker.setMap(map); trafficLayer = new google.maps.TrafficLayer(); // trafficLayer.setMap(map); layer1 = new google.maps.FusionTablesLayer({ // map: map, heatmap: { enabled: false }, query: { select: "skilines", from: "1R5pCEyNN74N8Dt9MkfNXA6A9D1HbQESzOR1fYFa7", where: "" }, options: { styleId: 2, templateId: 2 } }); layer2 = new google.maps.FusionTablesLayer({ // map: map, heatmap: { enabled: false }, query: { from: "19iu58FDFcBIZZ-wU1iZcf89AI5ABDJ7YTv355su5", where: "" }, options: { styleId: 2, templateId: 2 } }); layer3 = new google.maps.FusionTablesLayer({ // map: map, heatmap: { enabled: false }, query: { select: "summerhiking", from: "1t1XNnG7J7Zu1p5mIUpm6qIGVYwzhkCgPy_je0IKr", where: "" }, options: { styleId: 2, templateId: 2 } }); layer5 = new google.maps.KmlLayer('http://deepfrogphoto.com/Brett-Pelletier- Photography/Links/maps/kml/topobwkml.kml', { suppressInfoWindows: true, // map: map, preserveViewport: true }); // Create the DIV to hold the control and // call the HomeControl() constructor passing // in this DIV. var homeControlDiv = document.createElement('div'); var homeControl = new HomeControl(homeControlDiv, map); homeControlDiv.index = 1; map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); } google.maps.event.addDomListener(window, 'load', initialize); if (!navigator.geolocation) { alert('Your browser does not support geolocation'); }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/geolocationmarker/src/geolocationmarker.js"></script> <li> <a> <input id="show_hide_layer5" onchange="toggleLayer(layer5)" type="checkbox" value="ON" />B+W Map</a> </li> <li> <a> <input id="show_hide_layer1" onchange="toggleLayer(layer1)" type="checkbox" value="ON" />Backcountry Ski Lines</a> </li> <li> <a> <input id="show_hide_layer2" onchange="toggleLayer(layer2)" type="checkbox" value="ON" />Resort Lifts</a> </li> <li> <a> <input id="show_hide_layer3" onchange="toggleLayer(layer3)" type="checkbox" value="ON" />Summer Trails</a> </li> <li> <a> <input id="show_hide_layer4" onchange="toggleLayer(layer4)" type="checkbox" value="ON" />Snow Stations</a> </li> <li> <a> <input id="show_hide_layer4" onchange="toggleLayer(trafficLayer)" type="checkbox" value="ON" />Traffic</a> </li> <div id="map_canvas" style="height:500px; width:500px;"></div>