javascript - Cannot display another map on map click listener event -

i trying create page loads small google map , working fine. want add map event click shows bigger div displaying google map same lng , lat. div shown google logo , beige background color , there no map , can't figure out problem. working on visual studio 2012 , google map shown using javascript.

below code:

  var latlng;          function initialize(lng, lat) {              var myoptions = {                zoom: 17,                center: latlng,                maptypeid: google.maps.maptypeid.roadmap             };              var map = new google.maps.map(             document.getelementbyid("map_canvas"),             myoptions);              var marker = new google.maps.marker({                position: latlng,                map: map,                icon: "/images/marker.png",                title: "this place."             });              var contentstring = 'hello <strong>world</strong>!';             var infowindow = new google.maps.infowindow({                content: contentstring              });              google.maps.event.addlistener(marker, 'click', function () {                infowindow.open(map, marker);             });              document.getelementbyid("map_canvas").style.visibility = 'visible';              map.addlistener('click', function (e) {              var myoptions2 = {                zoom: 17,                center: latlng,                maptypeid: google.maps.maptypeid.roadmap             };              var map2 = new google.maps.map(               document.getelementbyid("modal-body"),               myoptions2);              var marker2 = new google.maps.marker({                position: latlng,                map: map2,                icon: "/images/marker.png",                title: "this place."             });              var contentstring2 = 'hello <strong>world</strong>!';             var infowindow2 = new google.maps.infowindow({                content: contentstring2             });              google.maps.event.addlistener(marker2, 'click', function () {                infowindow2.open(map2, marker2);             });             document.getelementbyid("mymodal").style.display = "block";                });        } 

those divs displaying maps:

 <div id="map_canvas" class="mapdiv" style="visibility:hidden" > </div>     <div id="mymodal" class="modal" style="display: none">       <div class="modal-content">         <span onclick="closemydiv();" id="closespan" class="close">×</span>         <br /><br />         <div id="modal-body"  class="modal-body">            hello world !         </div>       </div>     </div>   

i repeat: modal-body changes when click on map-canvas (by adding google logo , changing background color), not displaying map, , tried fill map in div before click event still have same problem.

any hints?

note: if comment concerning map-canvas , i show mymodal div @ onload event, map displayed properly!

1.make sure modal-body have width , height set in css.

2.if div containing map, or it's parent, or it's parent's parent (any predecessor) has display:none set @ point, map view won't initialise , see gray map. noticed show modal after map initialised. map appear properly, either run code

document.getelementbyid("mymodal").style.display = "block"; 

before map2 initialisation, or trigger resize event on map after visibility change, reinitialise map view:

google.maps.event.trigger(map2,'resize');  

probably not relevant case, need trigger resize event on map if map containing's div dimensions change.