Google Maps non carica la seconda volta - AngularJS

Question

Sto utilizzando l'API di GoogleMap (pacchetto js "angular-google-maps") e ho un comportamento molto strano.

La prima volta che carico, ottengo la mappa a pieno carico, come qui:

Poi chiudo la finestra di dialogo e riaprirlo, vedo questo:

Tenete a mente, che la mappa è visualizzata come una finestra di dialogo sopra un'altra finestra di dialogo.

Qualche idea?

Answer 1

È necessario ridisegnare la mappa. È possibile farlo utilizzando il seguente codice:

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

questo renderà l'aggiornamento mappa, fissare il vostro problema.

Answer 2

Se si utilizza il modulo Angular Google Map, è necessario aggiungere l'attributo di aggiornamento all'elemento googlemap.

Come riportato nella documentazione Modulo:

refresh = "espressione" - Espressione che, se vale true, attiverà un aggiornamento della mappa. Utile quando la mappa è inizialmente nascosta.

Answer 3

Basta aggiungere:

$ scope.render = true;

e aggiungere ng-if = "rendere" al tuo vostro controllo della mappa, in questo modo:

<ui-gmap-google-map ng-if="$parent.render" center="map.center" zoom="map.zoom"> 
     <marker coords="map.center"></marker> 
    </ui-gmap-google-map> 

Answer 4

Problema trova risposta qui https://github.com/allenhwkim/angularjs-google-maps/issues/88

è necessario centrare manualmente per evitare questo problema come la in seguito,

Nei tuoi js regolatore

$scope.$on('mapInitialized', function (event, map) 
{ 
    window.setTimeout(function() { 
     window.google.maps.event.trigger(map, 'resize'); 
     map.setCenter(new google.maps.LatLng(38,-98)); 
    }, 100) 
}); 

E nel tuo codice HTML

<ng-map ng-if="subView=='map'" center="38,-98" zoom="5"></ng-map>