谷歌地圖不呈現在模態彈出

以下是我的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); 
        } 
       } 
      } 
     }); 
    }

來源

2017-12-18 Sunil Chaudhary

當div沒有大小（它沒有顯示任何內容）時，您可能正在初始化您的地圖。在彈出窗口打開時初始化它，或者在彈出窗口打開時啓動 - 在頁面加載 - 並在初始化後隱藏它。爲此，coukld在開始時使用不透明度0，並在隱藏顯示none後將其更改爲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); 
    }

來源

2017-12-18 09:51:36

谷歌地圖不呈現在模態彈出

回答

相關問題