Apply jquery effect to button and div which are on .aspx page

Question

I have controls on .aspx page and I want to apply jquery effect I successfully did it. But the problem is when I click on the button the hidden div is shown but the content is not visible (I have map inside div, it is blank only marker can be seen). When I go to check the error in the console, the map becomes visible.. I also tried with html button but didnt succeed.

Here is my code:

<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]

Does your map load on page load? Also do you want to show hidden div when your Asp button is clicked? — JustLearning, Jan 08 '16 at 16:36
no map does not load on page load.. yes I want to make the map visible on asp button click. — Ash, Jan 08 '16 at 16:42
Have you tried adding a OnClientClick event to your ASP button like this: OnClientClick="return ShowMapFunction();". Then your ShowMapFunction: function ShowMapFunction(){ $('#map').show(); return false; } — JustLearning, Jan 08 '16 at 16:46
I did. Facing the same problem. Blank div with marker but no map. When I open console map becomes available. — Ash, Jan 08 '16 at 17:17
If your map does not load on page load, you can load it on button click and show the map div: so in the ShowMapFunction can you add the jquery code to load your map. Surely it should work — JustLearning, Jan 08 '16 at 17:23
I want to do that only. On button click the map is shown and the div tag is shown as per jquery code. But the map does not load see the first pic.. — Ash, Jan 08 '16 at 17:26

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

Take a look at this solution. On button click, latitude and longitude is passed to an initialize function that create a google maps object and displays the map.

Load Google Map on button click with jQuery

edited May 23 '17 at 11:59

Community

1
1

answered Jan 08 '16 at 17:42

JustLearning

3,164
3
35
52

score 1 · Answer 2 · answered Jan 09 '16 at 04:55

You should try this function to hide and show map.

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

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

score 1 · Accepted Answer · answered Jan 09 '16 at 07:44

If the maps is hidden when the page is created.. the maps is not showed when the div became visibile.. This is a known behavior of google maps. to remedy this situation, you can act in two ways one and manage an event resize the other, i think more easy, is to call again the initialization function of the map from within the function 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>

Apply jquery effect to button and div which are on .aspx page

3 Answers3

Linked