googlemap not loading completely

Question

I stored latitude and longitude in my database and extracting that I embeed google map in my page but when the page load map displaying only in the left top corner of div container, ie displaying only the one forth portion of div container, and the other part is blank. but when i press F12 for inspecting the code (Firebug), it will display completely.

This is my code.

jQuery(document).ready(function () {
    var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
    $(function () {
        $('#dvMap').on('shown', function () {
            google.maps.event.trigger(map, "resize");
        });
    });
    //google.maps.event.addDomListener(map, 'resize', function(){
    //    alert('div resize');
    //    google.maps.event.trigger(map,'resize');
    for (i = 0; i < markers.length; i++) {
        var data = markers[i]
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });
        })(marker, data);
    }
});

Can anyone solve this?

Answer 1

I've had this problem before. The trick is to set the width and height of your div before calling the Map function:

<div id="dvMap" style="width:500px;height:500px;"></div>