Wie können Google Maps-Layer mit Kontrollkästchen aktiviert und deaktiviert werden?

Question

Ich versuche, Google Maps mit Hilfe von Kontrollkästchen Token-, Cloud- und Wetter-Layer hinzuzufügen. Wenn ich dies jedoch versuche, verschwinden alle Ebenen, unabhängig davon, ob die Kontrollkästchen aktiviert oder deaktiviert sind. Ich habe noch nie so etwas in Javascript gemacht und ich bin wirklich neu in Javascript, also habe ich keine Ahnung, was ich falsch mache. Hier ist mein Code, jede Hilfe wird großartig!

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. die Wetterlage zu verwenden, müssen Sie die library
2. zu aktivieren und deaktivieren Schichten im globalen Bereich (wo HTML-Klick schließen Listener ausführen), Ihre Karte muss global sein (definieren Sie sie außerhalb von Funktionen, initialisieren Sie sie jedoch im onload-Ereignis)
3. Sie müssen auch Ihre Schichten im globalen Geltungsbereich definieren.
4. eine Schicht, die Verwendung setMap (Karte), angezeigt werden es setMap (null)

geändert "check" Funktion nutzen zu verbergen:

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