Firefox Issue with Google.Map Tiles

Question

While viewing the google.maps.Map on firefox the tiles don't seem to line up correctly.

_{(source: iforce.co.nz)}

But I'm getting the expected result while viewing the map within Google Chrome

_{(source: iforce.co.nz)}

Javascript is based off source from Google Simple Map

I have created a JSFiddle (based off code, from the website in question).

The fiddle seems to load fine in firefox, but when the same code is loaded on the website (UTF-8 Character Set, the tiles seem to overlay and break).

Answer 1

This behavior probably is similar to described in this question.

If so, the solution would be to explicitly invoke resize event:

google.maps.event.trigger(map, "resize"); 

Example

jQuery(document).ready(function () {

    initMap();

});

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('details_map_item'), {
        center: {
            lat: -34.397,
            lng: 150.644
        },
        zoom: 8
    });


    google.maps.event.addListener(map, 'tilesloaded', function () {
        google.maps.event.trigger(map, 'resize');
    });
}

#details_con,
#details_map{
    margin:0 2px 0 0;
    padding:10px;   
    list-style:none;
    background:#fff;
    box-shadow:1px 1px 1px 0px rgba(0, 0, 0, 0.5);
    font-size:14px;
}


#details_map{
    max-width:610px;
    padding:12px;   
    margin:20px auto;
    line-height:1;
}

div#details_map_item {
    height:300px;
    /* width:400px; */
    background: #69C none repeat scroll 0% 0%;
    font-size:14px;
}

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<div id="details_map">
   <div id="details_map_item"></div>
</div>