title: Google Map doesn't appear (doesn't load)
body: <p>I don't have experience with google map API, so I hope you can help me.</p>
  
  <p>the problem is whenever I click on show button, the width of the map appear, but it doesn't load, I can't see the map at all.</p>
  
  <p>but if i open the counsel in developer tools the map loads normally!</p>
  
  <p>codepen url for better explanation 
  <a href="https://codepen.io/ahmadz12/pen/QdRQbE" rel="nofollow noreferrer">https://codepen.io/ahmadz12/pen/QdRQbE</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="map-canvas" class='hide'&gt;&lt;/div&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false" type="text/javascript"&gt;&lt;/script&gt;
  &lt;a id='show'&gt;show&lt;/a&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#map-canvas{
    height: 500px;
    width: 500px;
    border: 3px solid black;
  }
  .hide{
    display:none;
  }
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>if (document.getElementById('map-canvas')){
  
      // Coordinates to center the map
      var myLatlng = new google.maps.LatLng(52.525595,13.393085);
  
      // Other options for the map, pretty much selfexplanatory
      var mapOptions = {
          zoom: 14,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      // Attach a map to the DOM Element, with the defined settings
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  
  }
  $('#show').click(function(){
   $('#map-canvas').removeClass( "hide" )
  });
  </code></pre>
  
  <p>Thanks</p>