谷歌地圖模式問題

我想顯示谷歌地圖到Twitter引導模式。當用戶第一次點擊按鈕Show map時，他能夠成功地看到地圖，因爲我正在生成地圖onclick()函數，但是當他關閉模式並重新打開它時，地圖不能正確顯示，並且地圖的90％部分變灰像下面谷歌地圖模式問題

enter image description here

我甚至嘗試這種解決方法是刪除整個DIV在地圖上被綁定，並重新生成它，但是招亙古不變的工作也請讓我知道我可以解決我的問題。

下面是我打電話的onclick顯示地圖的情況下

function mapp() 
{ 

//google.maps.event.trigger(map, "resize"); 
    //$("#map_google_canvas").empty(); 
$("#map_google_canvas").remove(); 

$("#crmap").append("<div id='map_google_canvas'></div>") 


    var myOptions = { 
     center: new google.maps.LatLng(54, -2), 
     zoom: 6, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_google_canvas"), myOptions); 

     var addressArray = new Array("London, United Kingdom", "London Road, Brentwood, United Kingdom", "Brentwood, United Kingdom"); 


    var geocoder = new google.maps.Geocoder(); 

    var markerBounds = new google.maps.LatLngBounds(); 

    for (var i = 0; i < addressArray.length; i++) { 
     geocoder.geocode({ 
      'address': addressArray[i] 
     }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location 
       }); 
       markerBounds.extend(results[0].geometry.location); 
       map.fitBounds(markerBounds); 
      } else { 
       alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
    } 


}

請幫助我的js函數，

感謝

來源

2013-03-31 soft genic

這是完全正常和預期的行爲，我很難說。結合在隱藏 - >展示 - >隱藏元素上展示他們，Google地圖會出現許多頁面「混亂」。此外，谷歌地圖不會每次都搞砸，它只是最有可能的。唯一的解決方案是在容器被設置爲show/visible之前重新生成地圖，這裏是引導模式。當然，您只需運行一次'addressArray'循環，並將地理編碼結果存儲在查找表中。 – davidkonrad

問題正在從以下問題解決：http：//stackoverflow.com/questions/8812268/grey-boxes-appear-in-parts-of-embedded-google-map-in-modal-box？rq = 1 –

酷！ Didnt知道調整大小的觸發器。它可以在未來幫助很多！已經提出了你的問題和你找到的答案。謝謝！ – davidkonrad

由於您加載地圖在非尚未確定寬度元素你有這個解決方案。

你應該觸發google.maps resize事件初始化地圖經緯度

$('.modal').on('shown', function() { 
    // also redefine center 
    map.setCenter(new google.maps.LatLng(54, -2)); 
    google.maps.event.trigger(map, 'resize'); 
})

來源

2013-09-03 07:49:45 zufrieden

如果您查看評論，OP提到了http://stackoverflow.com/questions/8812268/grey-boxes-appear-in-parts-of-embedded-google-map-in-modal-box?rq=1解決了他的問題。無論如何沒有問題 – Praveen

我與角工作，什麼剛剛爲我工作，在ui.bootstrap.collapseAngularUI指令是使用後超時。該指令與模態有相同的問題，因爲地圖大小在新視圖完全加載之前未定義，並且地圖以灰色區域顯示。我所做的是將此代碼添加到打開摺疊內容的按鈕。也許你可以用打開模式的按鈕來適應你的情況。

window.setTimeout(function() { 
    google.maps.event.trigger(map, 'resize') 
}, 0);

希望它有幫助。

來源

2014-08-07 19:21:21 Timbergus

如果使用的是棱角分明，你應該使用$超時代替的setTimeout。將$ timeout設置爲0的函數包裝將確保在當前執行上下文完成後執行包裝函數。在你的情況下，Google Maps API只會在模態之後重新繪製地圖，並且包含地圖的元素將完全呈現。你不會看到任何灰色地帶。

$timeout(function() { 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(new google.maps.LatLng(53.5085011, -6.2154598);); 
}, 0);

來源

2014-10-16 09:51:02 codeepic

我有同樣的問題。但我發現模態顯示事件的問題。因爲它不適用於某些版本的問題，所以我只是按照bootstrap模式文檔來實現它。

引導莫代爾地圖問題解決方案：

$(document).ready(function(){ 
    $('#locationMap').on('shown.bs.modal', function(){ 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195)); 
    }); 
});

最後這個工作對我來說，它可以幫助別人。

來源

2014-11-28 11:33:29 SSR

嘗試了此頁面上的所有內容，這是唯一一個爲我工作的人。 – onlymushu

可以使用visibility:hidden和visibility:visible代替display:none和display:block。這對我有效。你甚至可以爲此編輯模態的CSS。

來源

2014-12-16 22:21:52 user1012181

如果您正在使用引導3，你必須這樣做：

function showMap() { 
     var mapOptions = { 
      zoom: 12, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), 
      mapOptions); 
     $('#mapmodal').on('shown.bs.modal', function() { 
       google.maps.event.trigger(map, 'resize'); 
       map.setCenter(new google.maps.LatLng(54, -2)); 
      }); 
     $('#mapmodal').modal("show"); 
}

還要確保你沒有設置任何最大寬度或最大高度值IMG - 標籤。如果你在你的CSS樣式表，這樣做是把這個在它的結束：

#map img{ 
    max-width:none; 
    max-height:none; 
}

我不Quiete酒店不確定是否這裏有必要，但設定一個高度值到div牽着你的地圖應該是一件好事：

<div id="map" style="height:400px"></div>

我組裝了這個從幾個stackoverflow討論。

來源

2015-02-03 19:27:18

不錯的完整例子。完美的作品！ – karantan

是的，這是工作。謝謝！ – arjunaaji

我也有這個問題，想出了這個簡單的解決方案。

等到你的模態被完全加載，然後在map函數上設置timeOut事件。

$('#MyModal').on('loaded.bs.modal',function(e){ 
    setTimeOut(GoogleMap,500); 
});

我非常肯定它會在所有情況下工作了。

來源

2015-02-12 06:08:53 Manoj

感謝user1012181的回答，我解決了這個問題。我個人也喜歡這個純粹的CSS解決方案。

div#myModalMap.modal.fade.in{  
    visibility: visible; 
} 

div#myModalMap.modal.fade{ 
    display: block; 
    visibility: hidden; 
}

來源

2016-03-01 18:53:03

我會用uiGmapIsReady等待DOM已準備就緒，然後迫使地圖調整大小：

uiGmapIsReady.promise().then(function() { 
 
    var map = $scope.map.control.getGMap(); 
 
    google.maps.event.trigger(map, 'resize'); 
 
});

來源

2016-07-14 04:15:12

以及這是如何通過上述幫助的答案，但我不得不打電話的主要功能使用onclick。

<span data-target="#enlargeModal"data-toggle="modal" onclick="newMap()" class="fa fa-expand r"></span> 

function newMap()

{

功能showMap（）{

//your map function

}

$('#enlargeModal').on('shown.bs.modal', function() { 
      var center = fullmap.getCenter(); 
      google.maps.event.trigger(fullmap, 'resize'); 
      fullmap.setCenter(center); 
    });

showMap（）; }

來源

2017-08-10 08:23:20

谷歌地圖模式問題

回答

相關問題