Ocultar y Mostrar con Mapa de Google – javascript c# asp.net

Pregunta:


Tengo un div en mi página ASP.NET que contiene un Mapa de Google, y necesito mostrarlo y ocultarlo pero no me funciona.

Este es el código dividido por lengaujes:

Javascript:

function ShowMap()
{
    var mapa = document.getElementById('map');
    mapa.display('block');
}

function HiddenMap()
{
    var mapa = document.getElementById('map');
    mapa.display('none');
}

ASP.NET:

<form id="form1" runat="server">
    <div>
        <div id="map" style="width:auto; height:390px; top:2%;display:none;"> 
    </div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" Width="114px" />
        <asp:Button ID="Button2" runat="server" Text="Button"  Width="114px" OnClick="Button2_Click" />
    </div>
</form>

C#:

protected void Button1_Click(object sender, EventArgs e)
{
    String ScriptAct = "HiddenMap();";
    ScriptManager.RegisterStartupScript(this, this.GetType(), "HiddenMap()", ScriptAct, true);
}

protected void Button2_Click(object sender, EventArgs e)
{
    String ScriptAct = "ShowMap();";
    ScriptManager.RegisterStartupScript(this, this.GetType(), "ShowMap()", ScriptAct, true);
}

Preguntado por: Efrain Mejias C

Efrain Mejias C

Cambia el código javascript de la siguiente manera:

function ShowMap()
{
    var mapa = document.getElementById('map');
    mapa.style.display('block');
}

function HiddenMap()
{
    var mapa = document.getElementById('map');
    mapa.style.display('none');
}

Y en el código ASP.NET, usa la propiedad OnClientClick:

Ejemplo:

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ShowMap();" Width="114px" />
<asp:Button ID="Button2" runat="server" Text="Button"  Width="114px" OnClientClick="HiddenMap();" />

Prueba esta línea :

document.getElementById('mapa').style.display='block'; 

o para ocultar

document.getElementById('mapa').style.display='hidden';

Por ejemplo:

Botón Ocultar:

 protected void Button1_Click(object sender, EventArgs e)
        {

            String ScriptAct = "document.getElementById('mapa').style.display='hidden'; alert('Listo');";
            ScriptManager.RegisterStartupScript(this, this.GetType(), "hidden", ScriptAct, true);
        }

Botón Mostrar:

 String ScriptAct = "document.getElementById('mapa').style.display='block'; alert('Listo'); ";
            ScriptManager.RegisterStartupScript(this, this.GetType(), "show", ScriptAct, true);

CODIGO JS

function displayMap() {
              var listCount = $("[id*='hfCount']").val();
              if (listCount == 0)  return; 
              var atext = document.getElementById('btnmap').innerText;
              console.log(atext);
              if (atext == "VIEW ON MAP") {
                  document.getElementById('collapseMap').style.display = "block";
                  document.getElementById("btnmap").innerHTML = "HIDE MAP";
              }
              else {
                  document.getElementById('collapseMap').style.display = "none";
                  document.getElementById("btnmap").innerHTML = "VIEW ON MAP";
              }
      }

CODIGO ASP.NET

 <div id="collapseMap">
    <div id="map">
     </div>
 </div>

Fuente

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *