Google Maps wird nicht korrekt in Meteor Cordova

Question

Hallo Leute, ich habe ein Problem mit dburles Google Maps und Meteor Cordova App. Ich habe diesen HTML

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

und diese

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

und diese Helfer

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

     } 
    }, 
}); 

und StartUp

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

jetzt OnCreated js Ich habe dieses Ergebnis:

, wenn ich zum ersten Mal klicken habe ich dieses Problem: google map machen, zeigen aber nicht die Schicht der Karte wie dieses Bild

wenn ein Klick auf Resize Karte oben rechts i haben diese

und dann, wenn ich die Größe neu. Ich habe das gewünschte Ergebnis.

Also, wie kann ich das gewünschte Ergebnis im ersten Versuch? manchmal

Answer 1

ich vor dem gleichen Problem, und das Snippet ist eine Arbeits Abhilfe für mich:

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

Ort, der am Ende Ihrer GoogleMaps.ready() Funktion.

Ich hoffe, es hilft.