10

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 am generating the map onclick() function but when he closes the modal and reopen it then the map doesnot show properly and 90% part of the map goes grey like following

enter image description here

I even try this workaround that remove that whole div in which the map is bind and regenerate it but that trick doesnot work too kindly let me know how can i resolve my issue.

Following is my js function which i am calling onclick event of show map

function mapp()
{

//google.maps.event.trigger(map, "resize");
  //$("#map_google_canvas").empty();
$("#map_google_canvas").remove();

$("#crmap").append("<div id='map_google_canvas'></div>")


    var myOptions = {
        center: new google.maps.LatLng(54, -2),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_google_canvas"), myOptions);

        var addressArray = new Array("London, United Kingdom", "London Road, Brentwood, United Kingdom", "Brentwood, United Kingdom");


    var geocoder = new google.maps.Geocoder();

    var markerBounds = new google.maps.LatLngBounds();

    for (var i = 0; i < addressArray.length; i++) {
        geocoder.geocode({
            'address': addressArray[i]
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                markerBounds.extend(results[0].geometry.location);
                map.fitBounds(markerBounds);
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }


}

Kindly help,

Thanks

soft genic
  • 2,016
  • 3
  • 27
  • 44
  • It is completely normal and expected behaviour, I'm sad to say. Have many pages where google maps "messes up" in combination with showing them on hidden->shown->hidden elements. Furthermore, google maps does not mess up everytime, it is just most likely it will. The only solution is to regenerate the map right before its container is set to show/visible, here - the bootstrap modal. Of course, you only have to run the `addressArray`-loop once, and store the geocoder-result in a lookup-table. – davidkonrad Mar 31 '13 at 18:17
  • 2
    Issue is being resolved from following question:http://stackoverflow.com/questions/8812268/grey-boxes-appear-in-parts-of-embedded-google-map-in-modal-box?rq=1 – soft genic Mar 31 '13 at 20:35
  • Cool! Didnt knew the resize trigger. It can help a lot in the future! Has upvoted your question and the answer you found. Thank you! – davidkonrad Mar 31 '13 at 20:48
  • You may consider answering your own question and mark it as accepted. It is recommended procedure at stackoverflow. Others may looking for a correct answer to that problem. – davidkonrad Mar 31 '13 at 20:50
  • 1
    @davidkonrad i used the trick of using invisible instead of hiding my modal and just changing this attribute, it worked for me.. – soft genic Mar 31 '13 at 20:53

10 Answers10

4

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.

Timbergus
  • 3,167
  • 2
  • 36
  • 35
4

I had the same issue. but I found an issue with modal shown event. as its not working with some version of issue so I just follow the bootstrap modal documentation to achieve it.

Bootstrap Modal Map Issue Solution :

$(document).ready(function(){
  $('#locationMap').on('shown.bs.modal', function(){
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195));
  });
});

Finally This works for me, It could help to someone.

SSR
  • 6,398
  • 4
  • 34
  • 50
2

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.

Jason Saruulo
  • 1,837
  • 4
  • 21
  • 21
1

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');
})
SSR
  • 6,398
  • 4
  • 34
  • 50
zufrieden
  • 29
  • 2
  • 1
    If you check the comments, the OP has mentioned http://stackoverflow.com/questions/8812268/grey-boxes-appear-in-parts-of-embedded-google-map-in-modal-box?rq=1 resolved his issue. Anyway no problem – Praveen Sep 03 '13 at 07:55
1

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);
codeepic
  • 3,723
  • 7
  • 36
  • 57
1

The visibility:hidden and visibility:visible could be used instead of display:none and display:block. This worked for me. You can even edit the CSS of the modal for this.

user1012181
  • 8,648
  • 10
  • 64
  • 106
1

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;
}
Carlo S
  • 953
  • 1
  • 9
  • 14
0

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.

Manoz
  • 6,507
  • 13
  • 68
  • 114
0

I will use uiGmapIsReady wait the dom ready then force the map resize:

uiGmapIsReady.promise().then(function () {
    var map = $scope.map.control.getGMap();
    google.maps.event.trigger(map, 'resize');
});
Peter.Wang
  • 2,051
  • 1
  • 19
  • 13
0

well this is how the answers above helped but I had to call the main function using onclick .

<span data-target="#enlargeModal"data-toggle="modal" onclick="newMap()" class="fa fa-expand r"></span>

function newMap()

{

function showMap() {

//your map function

} 

    $('#enlargeModal').on('shown.bs.modal', function () {
          var center = fullmap.getCenter();
          google.maps.event.trigger(fullmap, 'resize');
          fullmap.setCenter(center);
    });

showMap(); }

Ocool Sanni
  • 29
  • 3