Google지도 v3에서 날씨 레이어 토글

다른 질문에 대한 답을 살펴 봤지만 코드를 작동시킬 수 없습니다. 지금 당장지도의 날씨 레이어에 토글 버튼을 추가/해제하려고합니다. 그러나 버튼을 클릭해도 아무런 변화가 없으며 어디서 잘못 될지 잘 모르겠습니다.Google지도 v3에서 날씨 레이어 토글

<script type="text/javascript"> 
// Declaring the map as a global variable 
var map; 

function initialize() { 
    var latlng = new google.maps.LatLng(27.7428, -97.4019); 
    var weatherOn = false; //starts off false because the weather layer is not on by default 

    // Setting up the map options 
    var mapOptions = { 
     center: latlng, 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     backgroundColor:'#c0c0c0', 
     draggableCursor: 'pointer', 
     draggingCursor: 'crosshair' 
     }; 

    // Assigning map to its variable 
    map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 

    var weatherLayer = new google.maps.weather.WeatherLayer({ 
     temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT 
    }); 
    // weatherLayer.setMap(map); 

    // Setting a listener that will toggle the weather layer 
    google.maps.event.addDomListener(document.getElementById("weatherToggle"), 'click', function() { 
     if (weatherOn == true) { 
      weatherLayer.setMap(null); 
      weatherOn = false; 
     } 
     else { 
      weatherLayer.setMap(map); 
      weatherOn = true; 
     } 
    }); 
}; 
</script>

weatherToggle은 내 페이지에서 만든 버튼의 ID입니다. 도와 주셔서 감사합니다!

출처

2013-12-11 jbri

weather library을 포함하고 있습니까? 이 코드는 나를 위해 작동 :

<!DOCTYPE html> 
<html> 
    <head> 
<title>Google Maps</title> 
     <style type="text/css"> 
html, body, #map-canvas { 
    width: 100%; 
    height: 500px; 
    margin: 0px; 
    padding: 0px 
} 
    </style> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=weather"> 
    </script> 
<script type="text/javascript"> 
// Declaring the map as a global variable 
var map; 

function initialize() { 
    var latlng = new google.maps.LatLng(27.7428, -97.4019); 
    var weatherOn = false; //starts off false because the weather layer is not on by default 

    // Setting up the map options 
    var mapOptions = { 
     center: latlng, 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     backgroundColor:'#c0c0c0', 
     draggableCursor: 'pointer', 
     draggingCursor: 'crosshair' 
     }; 

    // Assigning map to its variable 
    map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 

    var weatherLayer = new google.maps.weather.WeatherLayer({ 
     temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT 
    }); 
    // weatherLayer.setMap(map); 

    // Setting a listener that will toggle the weather layer 
    google.maps.event.addDomListener(document.getElementById("weatherToggle"), 'click', function() { 
     if (weatherLayer.getMap() != null) { 
      weatherLayer.setMap(null); 
     } 
     else { 
      weatherLayer.setMap(map); 
     } 
    }); 
}; 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
    <body> 
<input type="button" id="weatherToggle" value="toggle"></input> 
<div id="map-canvas"></div> 
    </body> 
</html>

working example

출처

2013-12-11 21:17:08 geocodezip

아, 정말 감사합니다! 이것은 처음으로 날씨 층을 망친 것입니다. 그래서 참조 할 라이브러리가 있다는 것을 깨닫지 못했습니다. – jbri

Google지도 v3에서 날씨 레이어 토글

답변

관련 문제