Modal bootstrap does not load Google Maps v3 correctly

Question

Modal bootstrap does not load Google Maps v3 correctly

Asked 10 years, 1 month ago

Viewed 1,852 times

2

Imagem de erro

People I have the following problem, when loading Google Maps v3 in a Modal with the Bootstrap Framework the map is not displayed correctly.

Follows the code:

    <!DOCTYPE html>
     <html>
      <head>
        <meta charset="UTF-8">
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <style>
            html, body, #map-canvas {
                height: 400px;
                margin: 0px;
                padding: 0px
            }
        </style>

    </head>
    <body>

        <a href="#" class="btn btn-default" id="openBtn">Open modal</a>

        <div class="modal fade" tabindex="-1" role="dialog" id="mapmodals">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                         <h4 class="modal-title">Peggy Guggenheim Collection - Venice</h4>

                    </div>
                    <div class="modal-body">
                        <div id="map-canvas"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="close" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->     

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

        <script>
        $(function () {
            $("#mapmodals").on('shown.bs.modal', function () {
                google.maps.event.trigger(map, 'resize');
            });

            $("#openBtn").click(function () {
                $('#mapmodals').modal('show');
            });
        });

        var map;

        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644)
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
        </script>

    </body>
</html>

Jsfiddle with example of error.

I built a Jsfiddle for you that reproduces the behavior: http://jsfiddle.net/h4d5006f/.

– Wakim

2014/09/25 at 00:36
Wakim, in the Jsfiddle that you rode does not have the Modal.

– Pedro A.

2014/09/25 at 00:41
I updated, see again, I forgot to give fork before.

– Wakim

2014/09/25 at 00:42
Wakim, now it’s exactly like the image above that I posted, IE, with the error, the map does not render in the model. Know any possible solution ?

– Pedro A.

2014/09/25 at 00:47
I edited your answer with a few adjustments, if I may. Includes the Jsfiddle link so you don’t have to search in the comments.

– Wakim

2014/09/25 at 00:59
No problem. In the example you mounted in Jsfiddle if you select a place by Street View it renders and everything is right, makes the test.

– Pedro A.

2014/09/25 at 01:07
I think the resize will work, but the event of shown.bs.modal is not being called.

– Wakim

2014/09/25 at 01:26
Let’s go continue this discussão in chat.

– Pedro A.

2014/09/25 at 01:27

Show 3 more comments

1 answer

Browser other questions tagged javascript html css twitter-bootstrap google-maps

You are not signed in. Login or sign up in order to post.

by Wakim • **10,455** points · Answer 1 · 2014-09-25T01:41:42+00:00

The problem is I was running the bind before the DOM have been built in full. Soon the selector $('#mapmodals') was not bringing any element and so did not call the function set for the event, which resized the #map-canvas.

For this, I enclosed the initialization code of events within a ready jQuery.

The code stayed:

// Pode usar o document.ready também:
//$(document).ready(function() { ... });

$(function () {
    // Esse trecho de codigo sera executado quando a construção do DOM for terminada. Possibilitando a localização dos elementos nos seletores.
    $("#mapmodals").on('shown.bs.modal', function () {
        google.maps.event.trigger(map, 'resize');
    });
});

var map;

function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

Example in Jsfiddle with the correction.