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

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

Answer 1

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.

Answer 2

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.