Карты Google не масштабируются по полилинии в модале с помощью django

У меня есть страница, которая содержит информацию о клиентах. На этой странице есть кнопка, которая открывает модальное окно с определенной информацией, и другая кнопка, которая открывает другое модальное окно, содержащее карту google. На этой карте я рисую полилинию и хочу увеличить масштаб этой полилинии.

При нажатии на кнопку открытия модала с картой, я получаю информацию о полилинии с помощью ajax и загружаю карту.

Этот модал открыт на веб-странице и не имеет масштабирования.

Вот мой код:

HTML определение модального:

<!-- Div class to show path map with modal -->
<div class="modal fade" id="modalPath" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" id="modal-path-type">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tratte</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal-body-for-path">
                <div class="container shadow-lg p-3 mb-5 bg-body rounded-3 border border-secondary"
                id="map" style="width: 100%; height: 400px;"></div> <div id="map"> </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#modalPathsList" id="go_back">Indietro</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Вот код javascript для получения данных с помощью ajax и загрузки карты:

function get_and_show_route(path_id, pilot_id){
        const modal_body = document.getElementById('modal-body-for-path');
        $.ajax({
            type: 'GET',  // Request's type
            url: '/modal-path-info/' + path_id,  // Request's url
            data: {  // Data to be sent
                request: 'path_info',
                csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
            },
            success: function (response) {
                let waypoints = response["waypoints"];

                let flightPlanCoordinates = [];
                let map;
                let flightPath;

                function reloadPath() {
                    flightPath = new google.maps.Polyline({
                        path: flightPlanCoordinates,
                        geodesic: true,
                        strokeColor: "#000000",
                        strokeOpacity: 0.7,
                        strokeWeight: 5,
                        editable: true,
                    });
                    flightPath.setMap(map);

                    zoomToObject(flightPath);

                }

                function buildWP(){
                    for(let i = 0; i < wPointTemp.length; i++){
                        let point = wPointTemp[i].split(" ")
                        let lat = parseFloat(point[0]);
                        let lng = parseFloat(point[1]);
                        flightPlanCoordinates.push({lat: lat, lng: lng});
                    }
                    reloadPath()
                }

                function set_start_end_location(wp, rp) {
                    wPointTemp = wp.split(",");
                    buildWP();
                }

                function initMap() {
                    let latlng = new google.maps.LatLng(43, 12.5);
                    let mapOptions = {
                        zoom: 5,
                        center: latlng
                    }
                    // Creating map object
                    map = new google.maps.Map(document.getElementById('map'), mapOptions);
                }

                function zoomToObject(obj){
                    let bounds = new google.maps.LatLngBounds();
                    let points = obj.getPath().getArray();
                    for (let n = 0; n < points.length ; n++){
                        bounds.extend(points[n]);
                    }
                    map.fitBounds(bounds);
                    console.log("zoom");
                }

            initMap();
            set_start_end_location(waypoints, rallypoints);
            
            },
            error: function (response) {
                const modal_type = document.getElementById('modal-path-type');
                modal_type.className = "modal-dialog modal-dialog-centered";
                modal_body.innerHTML = '<p>Si è verificato un errore. Riprovare.</p>';
            }
        });
    }

Я использую этот код на другой странице, и он работает нормально. Кто-нибудь может помочь мне решить эту проблему?

Вернуться на верх