चेक बॉक्स के साथ Google मानचित्र परतों को चालू और बंद कैसे करें?

Question

मैं चेक बॉक्स का उपयोग कर Google मानचित्र पर टॉगल यातायात, बादल और मौसम परत जोड़ने की कोशिश कर रहा हूं। हालांकि जब मैं ऐसा करने की कोशिश करता हूं तो सभी परत गायब हो जाती हैं इससे कोई फर्क नहीं पड़ता कि बक्से की जांच की गई थी या अनचेक किया गया था। मैंने जावास्क्रिप्ट में ऐसा कुछ भी नहीं किया है और मैं जावास्क्रिप्ट में वास्तव में नया हूं इसलिए मुझे नहीं पता कि मैं क्या गलत कर रहा हूं। मेरा कोड यहाँ है, कोई मदद महान होगी!

जावास्क्रिप्ट:

 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); 
    } 

एचटीएमएल

 <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. मौसम स्तर का उपयोग करने (वैश्विक दायरे में library
2. सक्षम और अक्षम करने के लिए परतों शामिल करने की जरूरत है, जहां एचटीएमएल क्लिक श्रोताओं को चलाते हैं), आपके मानचित्र को वैश्विक होने की आवश्यकता है (इसे किसी भी फ़ंक्शन के बाहर परिभाषित करें, लेकिन इसे ऑनलोड ईवेंट में प्रारंभ करें)
3. आपको वैश्विक स्तर पर अपनी परतों को परिभाषित करने की भी आवश्यकता है।
4. एक परत, उपयोग setMap (नक्शा) प्रदर्शित करने के लिए, यह setMap (शून्य) का उपयोग

संशोधित समारोह "जाँच" को छिपाने के लिए:

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