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.

Answer 3

I've been looking for a solution for a while. I had the exact same problems and I'm not the only one. The line of code above was not enough, but I noticed that resizing my browser manually was fixing the problem. If it solves yours too, then here is how I solve mine:

1) Add this at the end of your function initializing your map. It will add a listener to it and call the function when the map is loaded. It will basically simulate a resize.

google.maps.event.addListenerOnce(map, 'idle', function(){
    $(window).resize();
    map.setCenter(yourCoordinates);
});

I had to recenter the map after resize

2) Create a resize listener, calling the google map resize event like this:

$(window).resize(function() {
    if ($("#map_canvas").children().length > 0){    
        if (map)
        google.maps.event.trigger(map, 'resize');
    }});

I also had to put map outside my initialize function... I know it's not the best solution but it works for now. Don't worry about the resize() call.

It seems like it's related to hidden div containing google map. I also found a similar solution on this website jfyi. Good Luck!

Answer 4

This worked for me:

 var center = map.getCenter();
 // . . . your code for changing the size of the map
 google.maps.event.trigger(map, "resize");
 map.setCenter(center);

taken from the link, that @Bruno mentioned