Google지도가 크롬에 표시되지 않습니다.

Question

GPS 좌표를 GPS 좌표로 플롯하는 MVC4 응용 프로그램이 있으며 트위터 부트 스트랩 모달 내에서로드됩니다. 내 문제는지도가 때때로 아래 이미지에서 보이는 것처럼 IE 10을 사용할 때 모든 타일 (때로는 NOT)을로드한다는 것입니다.

지도는 크롬 버전 여기에 27

에 전혀 표시되지 않습니다지도

<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/GetGPSCoordinateCSV?vehicleId=@vehicleModel.VehicleData.Id&hours=24">Export GPS coordinates for the last 24 hours</a> 
    <br /> 
    <i class="icon-download-alt"></i> <a href="~/Vehicle/GetGPSCoordinateCSV?vehicleId=@vehicleModel.VehicleData.Id&hours=48">Export GPS coordinates for the last 48 hours</a> 
</div> 

의 HTML 코드 어떻게 내가 위스콘신에서 자바 스크립트를 호출 내 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); 
} 

Answer 1

확인을 그리는 데 사용하고 자바 스크립트 얇은, 문제는 내지도에서 숨겨진 트위터 부트 스트랩 모달 DIV, 포함되어 있었다 링크가 클릭 될 때까지 사용자. 내 Google지도 높이와 너비는 부모를 포함하는 높이와 너비에 상대적으로 백분율로 지정됩니다. 따라서 모달이 표시 될 때 내지도의 크기를 조정하려면 다음 javascript 함수를 포함시켜야했습니다.

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

나는 지금 모든 것이 예상대로 작동 크기 조절

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

을 실행하는 데이 JQuery와 기능을 추가했습니다.