Hide and Show div with Google Map

Navigation
1

I have a div on my ASP.NET page that contains a Google Map, and I need to show it and hide it but it does not work for me.

This is the code divided by 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);
}
    
asked by Efrain Mejias C 08.09.2016 в 21:30
source

3 answers

1

JS CODE 

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

ASP.NET CODE 

 <div id="collapseMap">
    <div id="map">
     </div>
 </div>
    
answered by 10.09.2016 / 15:34
source
1

Change the javascript code as follows: 

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

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

And in the ASP.NET code, use the property OnClientClick :

Example: 

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ShowMap();" Width="114px" />
<asp:Button ID="Button2" runat="server" Text="Button"  Width="114px" OnClientClick="HiddenMap();" />
    
answered by 08.09.2016 в 22:04
1

Try this line: 

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

or to hide 

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

For example:

Hide button: 

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

Show button: 

 String ScriptAct = "document.getElementById('mapa').style.display='block'; alert('Listo'); ";
            ScriptManager.RegisterStartupScript(this, this.GetType(), "show", ScriptAct, true);
    
answered by 10.09.2016 в 04:56
Remove a character from a string in java Copy value to an input that is inside a footer of a datatable