谷歌地圖不呈現模式彈出

Question

下面是我的jQuery代碼，我正在使用部分視圖在模態彈出窗口上渲染谷歌地圖。

地圖本身不會呈現，如果我調整瀏覽器窗口的大小或檢查瀏覽器時會呈現（與窗口調整大小相同）。

同樣，當根據“緯度-經度”設置將其渲染為不在中心時。

我想基於隱藏字段中設置的緯度-經度來動態渲染地圖。 目前，我正在傳遞的緯度= 30.704648600和經度= 76.717872600。

TIA，我不知道缺少什么，請幫忙。

jQuery的：-

    $(document).ready(function () {
        var currLoc;
        if ($('#Latitude').val().length > 0 && $('#Longitude').val().length > 0)
            initialize($('#Latitude').val(), $('#Longitude').val());
    });

    function initialize(Latitude, Longitude) {
        var latlng = new google.maps.LatLng(Latitude, Longitude);
        var map = new google.maps.Map(document.getElementById('map_'), {
            center: latlng,
            zoom: 13
        });
        var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            draggable: false,
            //anchorPoint: new google.maps.Point(0, -29)
        });
        map.setCenter(new google.maps.LatLng(Latitude, Longitude));

        var infowindow = new google.maps.InfoWindow();
        currLoc= $('#lastLocation').text();
        google.maps.event.addListener(marker, 'click', function () {
            var iwContent = '<div id="iw_container">' +
            '<div class="iw_title"><b>Last Location</b> : <span class="lastLoc">' + GetAddress(Latitude, Longitude) + '<span></div></div>';               
            infowindow.setContent(iwContent);               
            infowindow.open(map, marker);
        });
    }

    function GetAddress(Latitude, Longitude) {
        var LastLatLong = [];
        LastLatLong.push([Latitude, Longitude]);
        var latlngArray_ = LastLatLong[0];
        var latlngset_ = new google.maps.LatLng(latlngArray_[0], latlngArray_[1]);
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'latLng': latlngset_ }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    //currLoc= results[0].formatted_address;
                    if ($('.lastLoc').length > 0) {
                        debugger;
                        $('.lastLoc').text(results[0].formatted_address);
                    }
                }
            }
        });
    }

Answer 1

我得到了答案，可以先觸發地圖的resize事件，然后使用其setCenter屬性來完成。

我現在更改了初始化函數，它的工作正常。

function initialize(Latitude, Longitude) {
        var latlng = new google.maps.LatLng(Latitude, Longitude);
        var map = new google.maps.Map(document.getElementById('map_'), {
            center: latlng,
            zoom: 13
        });
        var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            draggable: false,
            //anchorPoint: new google.maps.Point(0, -29)
        });
        map.setCenter(new google.maps.LatLng(Latitude, Longitude));

        var infowindow = new google.maps.InfoWindow();
        currLoc= $('#lastLocation').text();
        google.maps.event.addListener(marker, 'click', function () {
            var iwContent = '<div id="iw_container">' +
            '<div class="iw_title"><b>Last Location</b> : <span class="lastLoc">' + GetAddress(Latitude, Longitude) + '<span></div></div>';               
            infowindow.setContent(iwContent);               
            infowindow.open(map, marker);
        });
  setTimeout(function () {
            google.maps.event.trigger(map, "resize");
            map.setCenter(new google.maps.LatLng(Latitude, Longitude));
        }, 300);
    }