how to deal with google map inside of a hidden div (Updated picture)

Question

i have a page and a google map is inside a hidden div at first. I then show the div after i click a link but only the top left of the map shows up.

i tried having this code run after the click:

    map0.onResize();

or:

  google.maps.event.trigger(map0, 'resize')

any ideas. here is an image of what i see after showing the div with the hidden map in it.

Answer 1

Just tested it meself and here's how I approached it. Pretty straightforward however let me know if you need any clarification

HTML

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

CSS

<style type="text/css">
#map_canvas {display:none;}
</style>

Javascript

<script>
        function displayMap() {
                    document.getElementById('map_canvas').style.display="block";
                    initialize();
                }
         function initialize() {
                  // create the map

                var myOptions = {
                    zoom: 14,
                    center: new google.maps.LatLng(0.0, 0.0),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                  }
                    map = new google.maps.Map(document.getElementById("map_canvas"),
                                                myOptions);

                 }


</script>