title: Google Map not displaying on HTML <div>?
body: <p>I am trying to develop a web page where there are two containers. mainmapdiv covers the entire page while mainhomediv is placed on top of mainmapdiv. My objective is to hide mainhomediv and display a Google Map on the mainmapdiv on clicking an image (id=mapbutton). The code is as follows:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var map;
  function initialize() {
      var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,    
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mainmapdiv"),mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  
  &lt;script&gt;
  var map;
  $(document).ready(function(){
  
  //Click on button to display map
  $('#mapbutton').click(function(){
      $('#mainhomediv').fadeTo("slow",0);
      $('#mainhomediv').css({opacity: 0});
      initialize();
  });
  
  //Click on Home to get back home div
  $('#home').click(function(){
      $('#mainhomediv').fadeTo("slow",1);
      $('#mainhomediv').css({opacity: 1});
  });
  });
  </code></pre>
  
  <p>HTML CODE</p>
  
  <pre><code>&lt;body&gt;
  &lt;!--This is the primary container--&gt;
  &lt;div id='#mainmapdiv' class='mainmapdiv'&gt;
      &lt;div id='#mainhomediv' class='mainhomediv'&gt;
      .
      //Somewhere in here there is an image with id='mapbutton'
      .
      .
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Now when I click the image, mainhomediv gets hidden perfectly, but the map is not displayed on mainmapdiv.</p>
  
  <p>I have imported the following scripts:</p>
  
  <pre><code>&lt;script src="jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/apijs?sensor=false"&gt;&lt;/script&gt;
  </code></pre>