Google MAP not showing in chrome

Question

I have an MVC4 application that plots GPS coordinates to a google MAP loading within a twitter bootstrap modal. My problem is that the map sometimes loads all of it's tiles (sometimes NOT) when using IE 10 as seen in the image below.

The map doesn't show at all in Chrome version 27.

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 I call the javascript from within 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 the javascript I'm using to draw the 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

Ok, the problem was that my map is contained within a twitter bootstrap modal div, which is hidden from the user until a link is clicked. My google maps height and width is specified to be a percentage relative to that of it's containing parent. Therefore I had to include the following javascript function to make sure that my map is resized when the modal is displayed.

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

and I added this jquery function to trigger the resize

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

Now everything is working as expected.