Come attivare e disattivare i livelli delle mappe di Google con le caselle di controllo?

Question

Sto cercando di aggiungere layer di traffico, cloud e meteo a Google maps utilizzando le caselle di controllo. Tuttavia, quando provo a farlo, tutti i livelli scompaiono, indipendentemente dal fatto che le caselle siano state selezionate o deselezionate. Non ho mai fatto nulla di simile in Javascript e sono davvero nuovo di Javascript quindi non ho idea di cosa sto facendo male. Ecco il mio codice, ogni aiuto sarà fantastico!

Javascript:

 function check() 
    { 
     var weatherLayer = new google.maps.weather.WeatherLayer({ 
     temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT 
     }); 
     var trafficLayer = new google.maps.TrafficLayer(); 
     var cloudLayer = new google.maps.weather.CloudLayer(); 

     if(document.getElementById('weather').checked) 

     {weatherLayer.setMap(map);} 

     else if(!document.getElementById('weather').checked) 

     {weatherLayer.setMap(map);} 

     cloudLayer.setMap(map); 

     trafficLayer.setMap(map); 
    } 

Html

 <label><input type="checkbox" id="weather" checked="checked" onclick="check()" />Weather</label> 
     <label><input type="checkbox" id="clouds" onclick="check()" />Clouds</label> 
     <label><input type="checkbox" id="traffic" onclick="check()" />Traffic</label> 

Answer 1

1. utilizzare il livello di tempo è necessario includere i library
2. per attivare e disattivare strati nella portata globale (dove HTML click ascoltatori eseguiti), la mappa deve essere globale (definirla al di fuori di qualsiasi funzione, ma inizializzarla nell'evento onload)
3. è inoltre necessario definire i livelli nell'ambito globale.
4. per visualizzare un livello, uso setMap (mappa), per nasconderlo utilizzare setMap (null)

modificato "check" Funzione:

function check() 
{ 

    if(document.getElementById('weather').checked) 

     {weatherLayer.setMap(map);} 

    else 

     {weatherLayer.setMap(null);} 

    if(document.getElementById('clouds').checked) 

     {cloudLayer.setMap(map);} 

    else 

     {cloudLayer.setMap(null);} 

    if(document.getElementById('traffic').checked) 

     {trafficLayer.setMap(map);} 

    else 

     {trafficLayer.setMap(null);} 
} 

working example