Google Maps-Visualisierungsfehler im Dialogfeld

Question

Ich habe eine Webanwendung mit knockout.js und Google Maps API für JavaScript entwickelt.

Zuerst habe ich eine Vorlage für Geolokalisierung Funktionalität erstellt. Die Vorlage ist wie folgt definiert:

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

Ich habe zwei div für meine jQuery-Dialoge erstellt. Dies ist der 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> 

In meinem Projekt habe ich zwei Tasten zu diesem JavaScript-Funktionen angehängt:

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

Das ist meine initMap Funktion:

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

Also, das ist mein Szenario. Nun mein Problem ist folgende: das erste Mal, dass ich den Dialog öffne ich die Karten wie das Bild sehen kann unter:

Wenn ich mein Fenster zu schließen und ich versuche, es wieder zu öffnen, kann ich nicht meine Karten wie die Ansicht Bild unten:

Nun ist der magische Trick, dass: ich STRG + F drücken in meinem Browser und ich kann meine Karten lesen:

können Sie mir bitte helfen? Danke

Answer 1

Ich habe eine Lösung für dieses Problem gefunden. Ich änderte meine initMap Funktion mit dieser Codezeile:

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

Also meine initMap Funktion wie folgenden Code wird:

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