CODEWITHSUNDEEP
htmlcssgoogle-mapstwitter-bootstrap
Farhan Salam
Farhan Salam

Reputation: 1485

Google maps with bootstrap modal, partially loading

The maps are loading just fine in a normal div. But in Bootstrap modal half or some portion of the map is showing, but when I open console it fixes the problem and shows the map completely.

Photo without console opened

Photo with console opened

this is my styling:

<style>
#map_canvas{
    width:100%;
    height: 230px;
    border: 1px solid #333335;
    margin-bottom:20px;
}
</style>

HTML for modal:

<!-- Map Modal -->
<div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel" aria-hidden="false">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal" aria-hidden="false">&times;</button>
                <h4 class="modal-title" id="mapModalLabel">Map: </h4>
            </div>
            <div class="modal-body" >
                <map id="map_canvas" nid="{{nhd.nid}}"></map>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Upvotes: 5

Views: 7377

Answers (5)

Fred K
Fred K

Reputation: 13910

Add this code at the bottom of your map initialize function:

var initialize;

initialize = function() {
  ...
  $("#modalWindowId").on("shown.bs.modal", function(e) {
    google.maps.event.trigger(map, "resize");
    return map.setCenter(markerLatLng); // Set here center map coordinates
  });
};

Check out this page for more information:

Upvotes: 1

Kees Hessels
Kees Hessels

Reputation: 37

I use the bootstrap modal 'shown.bs.modal' event to create the map when the dialog is shown.

$('#modalX').on('shown.bs.modal', function () {
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    pos = new google.maps.LatLng(latitude, longitude);

Upvotes: 0

user3606625
user3606625

Reputation: 31

Call google map initialize method on shown event of bootstrap

for bootstap 3

$("#modal_map").on("shown.bs.modal",function(){
        initialize();
    })

Upvotes: 3

Askarik
Askarik

Reputation: 21

Trigger in my situation not helped. I used js function setTimeout, it's init map in my new map-canvas after opened my modal popup

setTimeout(initialize, 500);

Upvotes: 2

Alkis Kalogeris
Alkis Kalogeris

Reputation: 17745

From the documentation

resize - Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize').

Because the modal is hidden when the map is rendered you have to call google.maps.event.trigger(map, 'resize') after showing the modal.

The fact that opening the console fixes the problem, is because it forces the container to resize, so the map is resized, thus refreshed, thus rendered correctly.

Upvotes: 6

Related Questions