谷歌地圖不顯示在鉻

我有一個MVC4應用程序，繪製一個twitter引導模式中的谷歌MAP加載GPS座標。我的問題是，如下圖所示，使用IE 10時，地圖有時會加載它的所有圖塊（有時不是）。谷歌地圖不顯示在鉻

enter image description here

地圖不會在Chrome版本27

enter image description here

這裏都顯示是地圖

<div id="VehicleMovementModal" class="modal hide fade"> 
<div class="modal-header"> 
    <button class="close" data-dismiss="modal">×</button> 
    <h3>Vehicle movement for the last 24 hours</h3> 
</div> 
<div class="modal-body"> 
    <div id="mapCanvas" class="mapCanvas"> 
    </div> 
</div> 
<br /> 
<div id="VehicleMovementLinkContainer" class="VehicleMovementLinkContainer"> 
    <i class="icon-download-alt"></i> <a href="~/Vehicle/[email protected]&hours=24">Export GPS coordinates for the last 24 hours</a> 
    <br /> 
    <i class="icon-download-alt"></i> <a href="~/Vehicle/[email protected]&hours=48">Export GPS coordinates for the last 48 hours</a> 
</div>

的HTML代碼我如何從wi調用javascript薄我的HTML頁面

<script src="http://maps.googleapis.com/maps/api/js?key=aaaaaaa&sensor=false"></script> 
<script type="text/javascript" src="~/Content/js/PlotVehicleMovement.js"></script> 
<script type="text/javascript"> 
    google.maps.event.addDomListener(window, 'load', initialize()); 
</script>

，我用繪製地圖

function initialize() { 

var gpsCoordinateCollection = $('#gpsCoordinates').val().split(','); 

if (gpsCoordinateCollection.length > 0) { 

    // The last GPS coordinates received + the date it was received. 
    var gpsCoordinatePacket = gpsCoordinateCollection[0].split(';'); 

    if (gpsCoordinatePacket.length > 0) { 

     var mapProp = { 
      center: new google.maps.LatLng(gpsCoordinatePacket[0], gpsCoordinatePacket[1]), 
      zoom: 15, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     }; 

     var map = new google.maps.Map(document.getElementById("mapCanvas"), mapProp); 

     plotVehicleMovement(map, gpsCoordinateCollection); 
    } 
    } 
} 

function plotVehicleMovement(map, gpsCoordinateCollection) { 

// Define the clickable area of the markers. 
var shape = { 
    coord: [1, 1, 1, 20, 18, 20, 18, 1], 
    type: 'poly' 
}; 

var polyLineLatLongCollection = []; 

for (var i = 0; i < gpsCoordinateCollection.length; i++) { 

    var gpsCoordinatePacket = gpsCoordinateCollection[i].split(';'); 

    var latLng = new google.maps.LatLng(gpsCoordinatePacket[0], gpsCoordinatePacket[1]); 

    polyLineLatLongCollection.push(latLng); 

    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     icon: { 
      path: google.maps.SymbolPath.CIRCLE, 
      scale: 4, 
      strokeColor: '#F5B71A' 
     }, 
     shape: shape 
    }); 
    marker.setMap(map); 
} 

var polyLine = new google.maps.Polyline({ 
    path: polyLineLatLongCollection, 
    strokeColor: '#F5B71A', 
    strokeOpacity: 1.0, 
    strokeWeight: 1 
}); 

polyLine.setMap(map); 
}

來源

2013-07-01 user65439

好了的JavaScript，問題是，我的地圖包含在Twitter的引導模式格，這是從隱藏在用戶直到鏈接被點擊。我的谷歌地圖的高度和寬度被指定爲相對於它包含父項的百分比。因此，我必須包含以下JavaScript函數以確保在顯示模式時調整了我的地圖。

function ResizeMap() { 
    google.maps.event.trigger(map, "resize"); 
}

，我加入這個jQuery功能觸發調整大小

$("#VehicleMovementModal").on('shown', function() { 
    ResizeMap(); 
});

現在一切工作正常。

來源

2013-07-01 15:35:36 user65439

真棒！謝謝，我一直在努力。 –

谷歌地圖不顯示在鉻

回答

相關問題