İletişim kutusunda Google Haritalar görselleştirme hatası

Question

JavaScript için knockout.js ve Google Haritalar API'sı ile bir web uygulaması geliştirdim.

Her şeyden önce, coğrafi konumlandırma işlevi için bir şablon oluşturdum. Şablon şu şekilde tanımlanır: 0Query iletişim kutularım için iki div oluşturdum. İki bu JavaScript işlevlerine bağlı düğmeleri Projemin İçinde

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

: Bu kodu

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

Bu benim initMap fonksiyonudur:

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

Yani, bu benim senaryo. Şimdi benim sorunum şudur: Benim iletişim kutusunu kapatın ve bunu yeniden denerseniz

, şöyle benim haritaları görüntülemek alamazsınız: iletişim kutusunu açmak ilk kez aşağıdaki resim gibi haritaları görüntüleyebilirsiniz aşağıdaki resim: Tarayıcımdaki CTRL + F tuşlarına basın ve benim haritaları görüntüleyebilirsiniz:

lütfen bana yardım edebilir

Şimdi, sihir bu? Teşekkürler

Answer 1

Bu sorun için bir çözüm buldum.

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

:

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

Yani benim initMap işlevi aşağıdaki kodu gibi olacak: Ben bu kod satırı ile benim initMap işlevini değiştirdi