Google Maps visualization error on dialog

Question

I've developed a web application with knockout.js and Google Maps API for JavaScript.

First of all, I've created one template for geolocalization functionality. The template is defined like that:

<script id="geolocalization-template" type="text/html">
    <div id="mapsAddress">
        <div id="maps-header" class="section tableCentred">
            <table class="tableCentred">
                <tr class="ucTitle">
                    <td>Address Type</td>
                    <td>Zip Code</td>
                    <td>District</td>
                    <td>City</td>
                    <td>Street</td>
                </tr>
                <tr>
                    <td>Advertized Address</td>
                    <td><input id="txZipCode" type="text" data-bind="value: AdvertizedAddress.ZipCode"/></td>
                    <td><input id="txProvince" type="text" data-bind="value: AdvertizedAddress.AreaCode"/></td>
                    <td><input id="txCity" type="text" data-bind="value: AdvertizedAddress.Town"/></td>
                    <td><input id="txStreet" type="text" data-bind="value: AdvertizedAddress.Street"/></td>
                </tr>
                <tr>
                    <td>Normalized Address</td>
                    <td><label id="txNorZipCode" data-bind="text: NormalizedAddress.ZipCode"/></td>
                    <td><label id="txNorProvince" data-bind="text: NormalizedAddress.AreaCode"/></td>
                    <td><label id="txNorCity" data-bind="text: NormalizedAddress.Town"/></td>
                    <td><label id="txNorStreet" data-bind="text: NormalizedAddress.Street"/></td>
                </tr>
            </table>
        </div>
        <div class="clear"></div>
        <div id="maps" class="maps"></div>
    </div>
</script>

I've created two div for my jQuery dialogs. This is the code:

<!-- Dialog Puntual Geolocalization -->
<div id="geolocalization-puntual-dialog" class="dialog" data-bind="template: { name: 'geolocalization-template', data: BaseViewModel.puntual }"></div>

<!-- Dialog Massive Geolocalization -->
<div id="geolocalization-massive-dialog" class="dialog" data-bind="template: { name: 'geolocalization-template', data: BaseViewModel.massive }"></div>

Inside my project I have two buttons attached to this JavaScript functions:

OpenDialogPunctualGeocoding : function(){
    $("#geolocalization-punctual-dialog").dialog(
                {
                    width: dialogWidth,
                    height: dialogHeight,
                    create: BasicViewModel.geo.initMap("punctual"),
                    buttons: [
                        {
                            text: ShowOnMap,
                            click: function () {
                                BasicViewModel.geo.ShowOnMap("punctual");
                            }
                        },
                        {
                            text: ShopDBResources.Save,
                            click: function () {
                                BasicViewModel.geo.GeolocalSave();
                                $("#geolocalization-punctual-dialog").dialog("close");
                            }
                        }
                    ]
                });
},
OpenDialogMassiveGeocoding : function(){
    $("#geolocalization-massive-dialog").dialog(
            {
                width: dialogWidth,
                height: dialogHeight,
                create: BasicViewModel.geo.initMap("massive"),
                buttons: [
                    {
                        text: ShowOnMap,
                        click: function () {
                            BasicViewModel.geo.ShowOnMap("massive");
                        }
                    },
                    {
                        text: Save,
                        click: function () {
                            $("#geolocalization-massive-dialog").dialog("close");
                        }
                    }
                ]
            });
},

This is my initMap function:

initMap: function (entityType) {
        if (!entityType)
            return;

        var query = undefined;
        if (entityType == "puntual";
            query = "#geolocalization-puntual-dialog div#maps";
        else if (entityType == "massive")
            query = "#geolocalization-massive-dialog div#maps";

        try{
            map = new google.maps.Map($(query)[0], {
                center: BasicViewModel.GoogleMapsDefaults.center,
                zoom: BasicViewModel.GoogleMapsDefaults.zoom
            });
            var infoWindow = new google.maps.InfoWindow({ map: map });

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    infoWindow.setPosition(pos);
                    infoWindow.setContent('Location found.');
                    map.setCenter(pos);
                }, function () {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                BasicViewModel.geo.handleLocationError(false, infoWindow, map.getCenter());
            }
        } catch (ex) {
            WriteToConsole("Error on initializing Google Maps:" + ex.ErrorNumber + " Error message:" + ex.message);
        }
    },

So, this is my scenario. Now my problem is the following: the first time that I open the dialog I can view the maps like the image below:

If I close my dialog and I try to reopen it, I cannot view my maps like the image below:

Now, the magic trick is that: I press CTRL + F on my browser and I can view my maps:

Can you please help me? Thanks

Answer 1

I've found one solution for this problem. I changed my initMap function with this line of code:

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

So my initMap function will be like following code:

try{
            map = new google.maps.Map($(query)[0], {
                center: BasicViewModel.GoogleMapsDefaults.center,
                zoom: BasicViewModel.GoogleMapsDefaults.zoom
            });
            google.maps.event.trigger(map, 'resize');

            var infoWindow = new google.maps.InfoWindow({ map: map });

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    infoWindow.setPosition(pos);
                    infoWindow.setContent('Location found.');
                    map.setCenter(pos);
                }, function () {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                BasicViewModel.geo.handleLocationError(false, infoWindow, map.getCenter());
            }
        } catch (ex) {
            WriteToConsole("Error on initializing Google Maps:" + ex.ErrorNumber + " Error message:" + ex.message);
        }
    },