Google map modal issue

Question

I am trying to display google map into the Twitter bootstrap modal. When user first click on the button Show map then he is able to see the map successfuly as i

Answer 1

If you are using bootstrap 3 you have to do this:

function showMap() {
        var mapOptions = {
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
        $('#mapmodal').on('shown.bs.modal', function () {
              google.maps.event.trigger(map, 'resize');
              map.setCenter(new google.maps.LatLng(54, -2));
            });
        $('#mapmodal').modal("show");
}

Also make sure that you did not set any max-width or max-height value to img - tags. If you did so in your css style sheet put this at the end of it:

#map img{
    max-width:none;
    max-height:none;
}

I am not quiete sure whether it is neccessary but setting a height value to the div holding your map should be a good thing:

<div id="map" style="height:400px"></div>

I assembled this from several stackoverflow discussions.

Answer 2

If you are using Angular, you should use $timeout instead of setTimeout. Wrapping a function with a $timeout set to 0 will ensure that the wrapped function is executed after the current execution context is finished. In your situation Google Maps API will only repaint the map after modal and the element holding the map are fully rendered. You won't see any grey areas.

$timeout(function () {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(53.5085011, -6.2154598););
}, 0);

Answer 3

I am working with Angular, and what has just worked for me, on the ui.bootstrap.collapse AngularUI directive is to use a timeout. This directive has the same problem as the modals because the map size is not defined until the new view is fully load, and the map appears with grey zones. What I have done is to add this code to the button that opens the collapsed content. Maybe you can adapt it to your case with the button that opens the modal.

window.setTimeout(function () {
    google.maps.event.trigger(map, 'resize')
}, 0);

Hope it helps.

Answer 4

Since you are loading the map in a non-yet-defined width element you have this solution.

You should trigger a resize event on google.maps after initialize map with latlong

$('.modal').on('shown', function () {
  // also redefine center
  map.setCenter(new google.maps.LatLng(54, -2));
  google.maps.event.trigger(map, 'resize');
})

Answer 5

I solved this issue thanks to user1012181 answer. I also personally like this pure CSS solution.

div#myModalMap.modal.fade.in{    
    visibility: visible;
}

div#myModalMap.modal.fade{
    display: block;
    visibility: hidden;
}

Answer 6

I also had this issue and came up with this easy solution.

Wait until your modal is completely loaded and then set the timeOut event on map function.

$('#MyModal').on('loaded.bs.modal',function(e){
   setTimeOut(GoogleMap,500);
});

I am very sure It will work out in all cases.