title: Grey area in Google maps
body: <p>I have implemented Google maps in my app (in a modal), however as you can see on the images below there is a grey area that I of course want to get rid of. It is possible to move the map so that the grey area disappears, but that shouldn't be needed.</p>
  
  <p>Thing is that the map is shown inside a modal box, which contains of a lot of content that's dynamically created when the button for showing the modal is clicked. It seems that the problem could be that the map content isn't fully loaded before the modal is loaded, but I'm not sure...</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>    ...
    &lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
        &lt;h3 id="myModalLabel"&gt;Test&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div id="modal-left" class="modal-body left"&gt;&lt;/div&gt;
      &lt;div class="modal-body right"&gt;
        &lt;div id="map"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      ...
  </code></pre>
  
  <p><strong>js:</strong></p>
  
  <pre><code>    function initializeMap(latitude, longitude) {
          var place = new google.maps.LatLng (latitude, longitude);
  
          var myOptions = {
              zoom: 10,
              center: place,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
  
          var map = new google.maps.Map(document.getElementById("map"), myOptions);
  
          var marker = new google.maps.Marker({
              position: place,
              map: map,
              title: ""
          });
      };
  
      $('.modal-btn').click(function(){
          var producerId = $(this).attr('id');
  
          GetProducer(producerId, function(data) {  // &lt;--- data retrieved through ajax
              initializeMap(data.latitude, data.longitude);
  
              var titel = data.name;
  
              var content = "&lt;p&gt;&lt;img class='modal-img' src='" + data.imgurl + "' /&gt;&lt;/p&gt;" +
                          "&lt;p&gt;" + data.name + ", " + data.address + "&lt;br/&gt;" +
                          data.zipcode + " " + data.town + "&lt;/p&gt;" +
                          "&lt;p&gt;&lt;a href='" + data.url + "' &gt;" + data.url + "&lt;/a&gt;&lt;/p&gt;";
  
              $('#myModalLabel').html(titel);
              $('#modal-left').html(content);
          });
      });
  </code></pre>
  
  <p><em>Image 1:</em></p>
  
  <p><img src="https://i.imgur.com/FhDx9.png" alt=""></p>
  
  <p><em>Image 2:</em></p>
  
  <p><img src="https://i.imgur.com/jx90i.png" alt=""></p>