Grey area in Google maps

Question

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.

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...

html:

    ...
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">Test</h3>
    </div>
    <div id="modal-left" class="modal-body left"></div>
    <div class="modal-body right">
      <div id="map"></div>
    </div>
  </div>
    ...

js:

    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) {  // <--- data retrieved through ajax
            initializeMap(data.latitude, data.longitude);

            var titel = data.name;

            var content = "<p><img class='modal-img' src='" + data.imgurl + "' /></p>" +
                        "<p>" + data.name + ", " + data.address + "<br/>" +
                        data.zipcode + " " + data.town + "</p>" +
                        "<p><a href='" + data.url + "' >" + data.url + "</a></p>";

            $('#myModalLabel').html(titel);
            $('#modal-left').html(content);
        });
    });

Image 1:

Image 2:

Answer 1

The usual reason why this is happening is that the size of the map is changed after the map has been initialized. If you for some reason change the size of the div with id="map" you need to trigger the "resize" event

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

You could just try to trigger the event in your javascript console and see if it helps.

Please note that this answer is a guess since there is not really anything in the question to work with, so please let me know if it does not help.

Answer 2

Put google.maps.event.trigger(map, "resize"); in a setTimeout function so that it fires AFTER the event is triggered.