CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
brassmookie
brassmookie

Reputation: 279

Google Maps fitBounds not working on map inside of modal

I have a map within a modal that I am attempting to call fitBounds on, based on a a set of points. The value of the points will vary depending on database values, but I've set the values below for simplification.

When the map is placed outside the modal, it works fine. Once inside the modal however, the fitBounds call always zooms out too far.

I thought it might be related to the modal not being visible, but I've put the function inside of the modal callback and that didn't seem to help.

The site is using Laravel 5.8.38.

My page content:

<head>
    <!-- CSS Includes - Bootstrap 4.4.1 -->
    {{ Html::style('css/app.css') }}
</head>

<body>

    <div class="content">
        <button class="btn btn-primary" data-toggle="modal" data-target="#map_modal">View Map</button>
    </div>

    <div class="modal" id="map_modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content">
                <div id="map" style="margin: 15px; height: 300px; width: 300px;"></div>
            </div>
        </div>
    </div>

    <!-- JavaScript Includes - jQuery 3.4.1 -->
    {{ Html::script('js/app.js') }}

    <script type="text/javascript">

        var map;

        $('#map_modal').on('show.bs.modal', function (e) {
            showMap();
        });

        function showMap() {
            // points a and b will vary depending on database values and which elements the user interacts with
            var a = new google.maps.Marker({
                position: new google.maps.LatLng(41.7760588,-74.2972913),
                map: map,
                label: "A"
            });
            var b = new google.maps.Marker({
                position: new google.maps.LatLng(41.9350477,-74.024461),
                map: map,
                label: "A"
            });
            var bounds = new google.maps.LatLngBounds();
            bounds.extend(a.getPosition());
            bounds.extend(b.getPosition());
            map.fitBounds(bounds);
        }

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 41.798057, lng: -73.973488},
                zoom: 8
            });
        }

    </script>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[key]&callback=initMap" async defer></script>

</body>

Upvotes: -1

Views: 673

Answers (1)

brassmookie
brassmookie

Reputation: 279

UPDATE:

        $('#request_modal').on('show.bs.modal', function (e) {
            showMap();
        });

needed to be changed to

        $('#request_modal').on('shown.bs.modal', function (e) {
            showMap();
        });

Upvotes: 1

Related Questions