Tener problemas para mostrar y ocultar la capa de radar en la página web

No puedo, por mi vida, descubrir cómo cambiar esta capa de radar de Google Maps para mostrarla y ocultarla cada vez que hago clic en el botón asociado. ¡Cualquier ayuda sería apreciada!

Básicamente, quiero que esta función se active y desactive cada vez que hago clic en mi botón “radar”.

Javascript:

function animateRadar(overlayMapTypes) { index = map.overlayMapTypes.getLength() - 1; window.setInterval(function(){ map.overlayMapTypes.getAt(index).setOpacity(0.00); index--; if(index < 0){ index = map.overlayMapTypes.getLength() - 1; } map.overlayMapTypes.getAt(index).setOpacity(0.60); }, 400); 

}

 function wx(){ animateRadar(); } $("#wxxx").click(function(){ $("#weather").toggleClass("active"); wx(); }); 

HTML:

 
    • Aquí está el jsFiddle

      Soy bastante nuevo en jsfiddle, así que no estoy muy seguro de cómo mostrar las imágenes correctamente. Aquí hay una imagen del sitio también: http://imgur.com/6tpVDA

      así que sí … la respuesta es bastante fácil de abordar sin revisar el resultado de tu código de muestra en jsfiddle

      window.setInterval(,) devuelve un handle, también conocido como timerId.

      para borrar el temporizador de intervalo, use window.clearInterval(timerId) .. para ocultar el radar, itere sobre overlayMapTypes y establezca la opacity en 0

       var timerId = -1; function animateRadar(overlayMapTypes) { index = map.overlayMapTypes.getLength() - 1; if (timerId >= 0) { //stop timer window.clearInterval(timerId); timerId = -1; //hide overlayMayTypes for (var i = 0, max = map.overlayMapTypes.length; i < max; i++) { map.overlayMapTypes.getAt(i).setOpacity(0.00); } return; } timerId = window.setInterval(function () { map.overlayMapTypes.getAt(index).setOpacity(0.00); index--; if (index < 0) { index = map.overlayMapTypes.getLength() - 1; } map.overlayMapTypes.getAt(index).setOpacity(0.60); }, 400); } 

      Por completitud...

      Voy a traer la muestra del código a esta respuesta (ojalá pudiera ocultar el estilo para esto, pero eso no está en la función stacksnippet ... aún)

       var mapCreated = false; var mapPoints = new Array(); var names = new Array(); var times = new Array(); var colors = new Array(); initialCenterFocused = false; var map; var imageArray = []; var kmzLayer; var bounds; var mapOptions; var markers = []; var lines = []; var fartherTimeThresholdMillis = 36000000; var nearerTimeThresholdMillis = 0; var now = new Date(); var endTimeCutOff = now.getTime() - fartherTimeThresholdMillis; var startTimeCutOff = now.getTime() - nearerTimeThresholdMillis; var timer; var playTimer; var isPlaying = false; var radar = false; var index; function eraseAllMarkersAndLines() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } for (var i = 0; i < lines.length; i++) { lines[i].setMap(null); } markers = []; lines = []; } function fetchNewest() { console.log("fetching newest"); nearerTimeThresholdMillis = parseInt(jQuery("#timeslider").slider("values", 0)) * 60000; fartherTimeThresholdMillis = parseInt(jQuery("#timeslider").slider("values", 1)) * 60000; now = new Date(); endTimeCutOff = now.getTime() - fartherTimeThresholdMillis; startTimeCutOff = now.getTime() - nearerTimeThresholdMillis; mapPoints.push(new google.maps.LatLng(33.730362, -85.792725)); names.push("Alpha"); times.push("1425059747829"); colors.push("Red"); mapPoints.push(new google.maps.LatLng(33.73041, -85.79264)); names.push("Delta"); times.push("1425059172108"); colors.push("Blue"); mapPoints.push(new google.maps.LatLng(33.72476, -85.788185)); names.push("Golf"); times.push("1425050587395"); colors.push("Green"); console.log(names); /** jQuery.ajax({ type: "POST", url: "fetchNewest14.jsp", data: "endTimeCutOff=" + endTimeCutOff + "&startTimeCutOff=" + startTimeCutOff, dataType: "script", scriptCharset: "utf-8", success: function(data){ //console.log(data); }, error: function(xhr, status, error) { //console.log("ERROR, DAVE" + error); } }) .done(function() { if (!mapCreated) { mapCreated = true; createMap(); } updateMap(); //console.log(mapPoints); }); clearTimeout(timer); timer = setTimeout('fetchNewest()', 10000); **/ } // end of fetchNewest function createMap() { mapOptions = { panControl: false, zoomControl: false, zoom: 10, streetViewControl: false, center: mapPoints[0] //{ lat: 33.8137100, lng: 85.7613500} }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //function drawWeather(){ //Load Images and add them to imageArray tileNEX = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD', isPng: true }); map.overlayMapTypes.push(tileNEX); tileNEX5 = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m05m/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD5', isPng: true }); map.overlayMapTypes.push(tileNEX5); tileNEX10 = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m10m/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD10', isPng: true, optimized: false }); map.overlayMapTypes.push(tileNEX10); tileNEX15 = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m15m/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD15', isPng: true }); map.overlayMapTypes.push(tileNEX15); tileNEX20 = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m20m/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD20', isPng: true }); map.overlayMapTypes.push(tileNEX20); tileNEX25 = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m25m/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD25', isPng: true }); map.overlayMapTypes.push(tileNEX25); tileNEX30 = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m30m/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD30', isPng: true }); map.overlayMapTypes.push(tileNEX30); } var timerId = -1; function animateRadar(overlayMapTypes) { index = map.overlayMapTypes.getLength() - 1; if (timerId >= 0) { window.clearInterval(timerId); timerId = -1; for (var i = 0, max = map.overlayMapTypes.length; i < max; i++) { map.overlayMapTypes.getAt(i).setOpacity(0.00); } return; } timerId = window.setInterval(function () { map.overlayMapTypes.getAt(index).setOpacity(0.00); index--; if (index < 0) { index = map.overlayMapTypes.getLength() - 1; } map.overlayMapTypes.getAt(index).setOpacity(0.60); }, 400); } //} function createMarkers() { } function updateMap() { eraseAllMarkersAndLines(); //console.log("updating map"); var markerOpacity = 1.0; var zIndex = 10; for (var i = 0; i < mapPoints.length; i++) { if (i > 0 && names[i] === names[i - 1]) { // this point should be connected to the previous point, so draw a line if (markerOpacity > 0) { // only add it if it's not totally transparent var lineCoords = [mapPoints[i - 1], mapPoints[i]]; var lineToDraw = new google.maps.Polyline({ path: lineCoords, map: map, strokeColor: '#000000', strokeOpacity: markerOpacity, strokeWeight: 2 }); lines.push(lineToDraw); } // also, fade the marker's opacity a bit, and set it back in layers markerOpacity = Math.max(markerOpacity - .1, 0); zIndex -= 1; } else { // it's a new name markerOpacity = 1.0; zIndex = 10; } if (markerOpacity > 0) { // add the marker var marker = new MarkerWithLabel({ position: mapPoints[i], map: map, labelContent: names[i], labelAnchor: new google.maps.Point(50, 11), labelClass: "labels", labelStyle: { opacity: markerOpacity }, zIndex: zIndex, labelZIndex: zIndex, icon: { path: google.maps.SymbolPath.CIRCLE, strokeColor: "black", fillColor: colors[i], fillOpacity: markerOpacity, strokeOpacity: markerOpacity, strokeWeight: 3, scale: 15 }, InfoWindowShown: true, title: String(zIndex) }); // set label text color based on squad color var lightColors = new Array("yellow", "pink"); if (lightColors.indexOf(colors[i].toLowerCase()) != -1) { // set labels to black text marker.labelStyle.color = "black"; } else { marker.labelStyle.color = "white"; } // shorten squad names var squadNames = { alpha: "A", bravo: "B", charlie: "C", delta: "D", echo: "E", foxtrot: "F", golf: "G" }; marker.labelContent = squadNames[marker.labelContent.toLowerCase()]; markers.push(marker); bounds.extend(mapPoints[i]); } // end of adding marker } if (!initialCenterFocused) { initialCenterFocused = true; map.fitBounds(bounds); } console.log(names); } // end of updateMap function moveForward() { console.log("moving forward"); jQuery("#timeslider").slider('values', 1, jQuery("#timeslider").slider("values", 1) - .5); jQuery("#amount").val(jQuery("#timeslider").slider("values", 0) + " - " + jQuery("#timeslider").slider("values", 1)); fetchNewest(); playTimer = setTimeout('moveForward()', 3000); } function setupInterface() { // set up the slider jQuery("#timeslider").slider({ range: true, min: 0, max: 600, step: 0.1, values: [0, 300], slide: function (event, ui) { jQuery("#amount").val("" + ui.values[0] + " - " + ui.values[1]); } }); jQuery("#amount").val(jQuery("#timeslider").slider("values", 0) + " - " + jQuery("#timeslider").slider("values", 1)); jQuery("#timeslider").on("slidestop", function (event, ui) { fetchNewest(); }); // set up button jQuery(function () { jQuery("#myButton").click(function (event) { if (!isPlaying) { isPlaying = true; jQuery("#myButton").prop("value", "Pause"); clearTimeout(timer); moveForward(); } else { isPlaying = false; jQuery("#myButton").prop("value", "Play"); clearTimeout(playTimer); } }); }); } // end of setupInterface function initialize() { setupInterface(); fetchNewest(); createMap(); } google.maps.event.addDomListener(window, 'load', initialize); function wx() { animateRadar(); } $("#wxxx").click(function () { $("#weather").toggleClass("active"); wx(); }); /*Checks to see if check boxes were clicked and displays output to console*/ function checkBoxValues(form) { var values = []; var squads = form.squads; /*iterate through check boxes*/ for (var i in form.squads) { if (squads[i].checked) { values.push(squads[i].value); } } /*log values to console*/ alert("Squads: " + values.join(', ')); return values; } initialize(); //***On click open Squads**** 
       /* Starter CSS for Flyout Menu */ #cssmenu { top: 50%; padding: 0; margin: 0; border: 0; display:block; position:relative; } #cssmenu ul, li { list-style: none; margin: 0; padding: 0; } #cssmenu ul { position: relative; z-index: 597; float: left; } #cssmenu ul li { float: left; min-height: 1px; line-height: 1em; vertical-align: middle; } #cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; } #cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } #cssmenu ul ul li { float: none; } #cssmenu ul li:hover > ul { visibility: visible; } #cssmenu ul ul { top: 0; left: 100%; } #cssmenu ul li { float: none; } /* Custom Stuff */ #cssmenu span, #cssmenu a { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; } #cssmenu:after, #cssmenu ul:after { content:''; display: block; clear: both; } #cssmenu > ul > li:first-child { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu > ul > li:last-child { -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu > ul > li ul ul { -moz-border-radius: 0 6px 6px 0; -webkit-border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu > ul > li ul ul li:first-child { -moz-border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu > ul > li ul ul li:last-child { -moz-border-radius: 0 0 5px 0; -webkit-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu ul, #cssmenu li { width: 100%; } #cssmenu li { background: #dddddd url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAMAAAA8eE0hAAAAUVBMVEX////MzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzNzc3l5eXg4ODZ2dnMzMzi4uLS0tLe3t7Q0NDV1dXj4+PW1tbk5OTc3NzPz8/R0dH0Zv5RAAAAC3RSTlMAM2YekAmlPHuEAwArv7wAAAA/SURBVHheY2Dl5mdigABGKV5BNnYok4dHQpKFGcrkEefj5gAzQUBABM7kFYQyRcX4mUBMkEpOLrA2IWGwfgYAn0UDZszv8IwAAAAASUVORK5CYII=) repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e5e5e5), color-stop(1, #dddddd)); background-image: -webkit-linear-gradient(top, #e5e5e5, #dddddd); background-image: -moz-linear-gradient(top, #e5e5e5, #dddddd); background-image: -ms-linear-gradient(top, #e5e5e5, #dddddd); background-image: -o-linear-gradient(top, #e5e5e5, #dddddd); background-image: linear-gradient(#e5e5e5, #dddddd); } #cssmenu li:hover { background: #f6f6f6; } #cssmenu a { color: #666666; line-height: 160%; padding: 11px 28px 11px 28px; width: 144px; } #cssmenu ul ul { width: 200px; border: 1px solid #dddddd; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } #cssmenu ul ul li { background: #f6f6f6; } #cssmenu ul ul li:hover { background: #dddddd; } #cssmenu ul ul li:hover a { color: #AE0001; } #cssmenu ul ul li ul li { background: #dddddd; } #cssmenu ul ul li ul li:hover { background: #b7b7b7; } #cssmenu .has-sub { position: relative; } #cssmenu .has-sub:after, #cssmenu .has-sub > ul > .has-sub:hover:after { content:''; display: block; width: 10px; height: 9px; position: absolute; right: 5px; top: 78%; margin-top: -5px; background-image: url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAMAAAA8eE0hAAAAUVBMVEX////MzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzNzc3l5eXg4ODZ2dnMzMzi4uLS0tLe3t7Q0NDV1dXj4+PW1tbk5OTc3NzPz8/R0dH0Zv5RAAAAC3RSTlMAM2YekAmlPHuEAwArv7wAAAA/SURBVHheY2Dl5mdigABGKV5BNnYok4dHQpKFGcrkEefj5gAzQUBABM7kFYQyRcX4mUBMkEpOLrA2IWGwfgYAn0UDZszv8IwAAAAASUVORK5CYII=); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } #cssmenu .has-sub > ul > .has-sub:after, #cssmenu .has-sub:hover:after { background-image: url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAMAAAA8eE0hAAAAUVBMVEX////d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3e3t729vbx8fHq6urd3d3z8/Pj4+Pv7+/h4eHm5ub09PTn5+f19fXt7e3g4ODi4uLUsVdlAAAAC3RSTlMAM2YekAmlPHuEAwArv7wAAAA/SURBVHheY2Dl5mdigABGKV5BNnYok4dHQpKFGcrkEefj5gAzQUBABM7kFYQyRcX4mUBMkEpOLrA2IWGwfgYAn0UDZszv8IwAAAAASUVORK5CYII=); } #cssmenu > ul > li.button { width: 64px; height: 64px; cursor:pointer; border:0.1em outset whitesmoke; } #cssmenu > ul > li.radar { width: 64px; height: 64px; background: whitesmoke url("images/radar.png") 0 0; border:0.1em outset whitesmoke; cursor:pointer; } #timeslider { height:1%; width:30%; position: absolute; top:95%; left:0; display:block; margin: 0px; padding: 0px; } #slideTime { height:1%; width:30%; position: absolute; top:93%; left:0; display:block; z-index:100; margin: 0px; padding: 0px; font-family:"Lucida Grande", "Arial", sans-serif; font-size: 12px; } #map-canvas { width: auto; position: absolute; top:0; bottom:0; left:0; right:0; z-index: 0; margin: 5px;border:0.1em outset #A0A0A0; padding: 0px; background-color:white; } body {background-color:whitesmoke;padding:1em;display:block;} .labels { color: black; font-family:"Lucida Grande", "Arial", sans-serif; font-size: 20px; font-weight: bold; text-align: center; width: 100px; white-space: nowrap; } #amount[readonly] { border:0; font-weight:bold; opacity:3; background-color: transparent; } #weather { display:none; } #weather.active { display:block; background-color:black; border:0.1em solid black; height:2em; width:2em; } 
          
      • Button
      • Radar