Erreur de visualisation de Google Maps dans le dialogue

Question

J'ai développé une application web avec knockout.js et l'API Google Maps pour JavaScript.

Tout d'abord, je l'ai créé un modèle pour la fonctionnalité de géolocalisation. Le modèle est défini comme suit:

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

J'ai créé deux div pour mes boîtes de dialogue jQuery. Voici le 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> 

Dans mon projet, j'ai deux boutons attachés à cette fonction JavaScript:

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"); 
         } 
        } 
       ] 
      }); 
}, 

Ceci est ma fonction initMap:

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); 
     } 
    }, 

Alors, voici mon scénario. Maintenant, mon problème est le suivant: la première fois que j'ouvre la boîte de dialogue, je peux voir les cartes comme l'image ci-dessous:

Si je ferme ma boîte de dialogue et je tente de le rouvrir, je ne peux pas voir mes cartes comme le image ci-dessous: maintenant

, le tour de magie est que: j'appuyez sur CTRL + F sur mon navigateur et je peux voir mes cartes:

Pouvez-vous s'il vous plaît me aider? Merci

Answer 1

J'ai trouvé une solution à ce problème. J'ai changé ma fonction initMap avec cette ligne de code:

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

donc ma fonction initMap sera comme code suivant:

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); 
     } 
    },