Bootstrap modal does not load Google Maps v3 correctly

Question

Bootstrap modal does not load Google Maps v3 correctly

Navigation

#1 by (3 votes)

2

Ihavethefollowingproblem,whenloadingGoogleMapsv3inaModalwiththeBootstrapFrameworkthemapisnotdisplayedproperly.

Followthecode:

<!DOCTYPEhtml><html><head><metacharset="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><scriptsrc="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 error.

javascript html css twitter-bootstrap google-maps

asked by anonymous 24.09.2014 / 22:47

1 answer

Display MySQL PHP Errors Correctly Login with Identity in MVC 5

score 3 · Answer 1

The problem is that I was running bind before DOM was built completely. Soon the $('#mapmodals') selector was not bringing any element and therefore did not call the function defined for the event, which resized the #map-canvas .

To do this, I've included the event initialization code inside a% of jQuery%.

The code is:

// 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 the JSFiddle with the fix.