Google MAP not showing in chrome

Question

I have an MVC4 application that displays the GPS coordinates for downloading Google MAP in twitter bootstrap motive. My problem is that the map sometimes loads all of its fragments (sometimes NOT) when using IE 10, as shown in the image below.

In Chrome version 27, the map does not appear at all.

Here is the HTML code for the map

<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> 

How do I call javascript from my HTML page

 <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> 

and javascript that I use to draw a map

 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

Well, the problem was that my map is contained in the twitter bootstrap div module, which is hidden from the user until the link is clicked. The height and width of my Google maps are shown as a percentage relative to the percentage containing the parent. So I had to enable the following javascript function to make sure my map is changed when the modal mod is displayed.

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

and I added this jquery function to trigger a resize

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

Now everything works as expected.