Meteor CordovaでGoogleマップが正しく表示されない

Question

こんにちは、私はdburles Google MapsとMeteor Cordova Appに問題があります。

：私は今、私はこの結果をこのHTML

<template name="googleMapsStatusFree"> 
    <div class="map-container"> 
     {{> googleMap name="map" options=mapOptions}} 
    </div> 
</template> 

、これは

Template.googleMapsStatusFree.onCreated(function() { 

    // We can use the `ready` callback to interact with the map API once the map is ready. 
    GoogleMaps.ready('map', function (map) { 

     //definisco le variabili che mi serviranno 
     let marker; 

     //Array che contiente i marker e che ad ogni cambio di prodotto viene svuotato 
     let gmarkers = []; 

     //Funzione firata ad ogni cambio di prodotto 
     Tracker.autorun(function() { 

      if (variabileReattivaRispostaApp.get() || variabileReattivaHistoryProduct.get()) { 

       //svuoto i marker precedentemente settati 
       for(let i=0; i<gmarkers.length; i++){ 
        gmarkers[i].setMap(null); 
       } 

       if (variabileReattivaRispostaApp.get()){ 

        console.log("Scansionato"); 

        let lat = variabileReattivaRispostaApp.get().ProdottoLat; 
        let lng = variabileReattivaRispostaApp.get().ProdottoLng; 

        //e restituisco il marker 
        marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(lat, lng), 
         map: map.instance, 
        }); 

        //lo aggiungo alla lista 
        gmarkers.push(marker); 

        //e setto le proprieta della nuova mappa 
        map.instance.setCenter({ 
         lat: lat, 
         lng: lng 
        }); 
        map.instance.setZoom(10) 
       } 

       if (variabileReattivaHistoryProduct.get()){ 

        console.log("History") 


        let lat = variabileReattivaHistoryProduct.get().ProdottoLat; 
        let lng = variabileReattivaHistoryProduct.get().ProdottoLng; 

        //e restituisco il marker 
        marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(lat, lng), 
         map: map.instance, 
        }); 

        //lo aggiungo alla lista 
        gmarkers.push(marker); 

        //e setto le proprieta della nuova mappa 
        map.instance.setCenter({ 
         lat: lat, 
         lng: lng 
        }); 
        map.instance.setZoom(10) 
       } 
      } 
     }); 
    }); 
}); 

と、このヘルパー

Template.googleMapsStatusFree.helpers({ 

    //Funziona che viene passata al template per la mappa 
    mapOptions: function() { 

     // Make sure the maps API has loaded 
     if (GoogleMaps.loaded()) { 

      let lat; 
      let lng; 

      if (variabileReattivaHistoryProduct.get()) { 
       lat = variabileReattivaHistoryProduct.get().ProdottoLat; 
       lng = variabileReattivaHistoryProduct.get().ProdottoLng 
      } 

      if (variabileReattivaRispostaApp.get()) { 
       lat = variabileReattivaRispostaApp.get().ProdottoLat; 
       lng = variabileReattivaRispostaApp.get().ProdottoLng 
      } 

      console.log(lat + "," + lng); 


      //ritorno le opzioni tra cui le coordinate memorizzate nel prodotto selezionato 
      return { 
       name: 'map', 
       element: document.getElementById('map'), 
       center: new google.maps.LatLng(lat, lng), 
       zoom: 10 
      }; 

     } 
    }, 
}); 

と起動

Meteor.startup(function(){ 
    GoogleMaps.load() 
}) 

をonCreated JSを持っています

私が最初にクリックしたときに、私はこの問題を持っている：グーグルマップはレンダリングが、右上のリサイズ地図上に画像

クリックのようなマップのレイヤを示していない私はこの

、その後、私はサイズを変更しています。私は望みの結果を持っています。だから、

、どのように私は最初の試みで望ましい結果を持つことができますか？

Answer 1

私は時々同じ問題に直面しており、このスニペットは私のための作業の回避策です：

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

置きますGoogleMaps.ready()関数の最後であること。

希望します。