在bootstrap局部視圖模式中的mvc谷歌地圖不起作用

Question

我正在做一個MVC Bootstrap Google Map V3應用程序。

當用戶輸入完整地址時，它將顯示在Google Map 。 如果顯示的div是在Partial View 。 看起來很好。

但是，當部分視圖處於Bootstrap模態視圖中時。 它沒有顯示任何東西。

當它工作時就是這種情況..

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MyKey&sensor=false"></script> <script type="text/javascript"> var geocoder; var map; var address = "Full Address "; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 14, center: latlng, // mapTypeControl: true, // mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, // navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("dvMap"), myOptions); if (geocoder) { geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { map.setCenter(results[0].geometry.location); var infowindow = new google.maps.InfoWindow( { content: '<b>'+address+'</b>', size: new google.maps.Size(150,50) }); var marker = new google.maps.Marker({ position: results[0].geometry.location, map: map, title:address }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } else { alert("No results found"); } } else { alert("Geocode was not successful for the following reason: " + status); } }); } } </script> <div style="width: 600px; height:400px"> @Html.Partial("~/Views/Shared/_ShowMap.cshtml") </div> 

這是對我的部分視圖的調用

在這種情況下我的部分視圖很簡單

不起作用的情況是這樣的。

我在JavaScript函數的bootom中添加了這一行...

 $("#myModalMapa").modal();

HTML Div就是這樣的。

我的部分觀點看起來像這樣。

Answer 1

當我在不同的問題中播種時，我對我的腳本進行了相同的更改

  $(document).ready(function () { $('#myModalMapa').on('shown.bs.modal', function () { var currentCenter = map.getCenter(); // Get current center before resizing google.maps.event.trigger(map, "resize"); map.setCenter(currentCenter); // Re-set previous center }); });