将jquery效果应用于.aspx页面上的按钮和div

Question

我在.aspx页面上有控件，我想应用jquery效果我成功完成了它。但问题是当我点击按钮时显示隐藏的div但内容不可见（我在div中有地图，它只有空白标记可以看到）。当我在控制台中检查错误时，地图变得可见..我也尝试使用html按钮但没有成功。

这是我的代码：

<asp:Button ID="btnFind" runat="server" Cssclass="btn btn-info btn-xs"   style="margin-left:185px;margin-top:8px;" Text="Find location on map" ></asp:Button>
     <div id="map" style="height:300px;width:600px" class="panel panel-body"></div>

 <script>
     $(document).ready(function () {
      $("#map").hide();
       $("#cpdMain_cpdCitizenProfile_btnFind").click(function () {
        $("#map").show();
        return false;
   });
});
    </script>

[![In the first pic map is not visible and after I click on console it becomes visible.][2]][2]

Answer 1

看看这个解决方案。单击按钮时，纬度和经度将传递给初始化函数，该函数将创建Google地图对象并显示地图。

Load Google Map on button click with jQuery

Answer 2

您应该尝试使用此功能隐藏和显示地图。

function displayMap() {
            document.getElementById('map_canvas').style.display = "block";
        }

        function hideMap() {
            document.getElementById('map_canvas').style.display = "none";
        }

Answer 3

如果在创建页面时隐藏了地图，则当div变为可见时，地图不会显示。这是谷歌地图的已知行为。为了解决这种情况，您可以采用两种方式行事并管理event resize 另一方面，我认为更简单，就是从函数Jquery

中再次调用映射的初始化函数

<script>
  $(document).ready(function () {
    $("#map").hide();
    $("#cpdMain_cpdCitizenProfile_btnFind").click(function () {
      $("#map").show();
      initMap();  // the map initialization function (use your function name)
      return false;
    });
  });
</script>