affichage angulaire google map en couleur grise

Question

Ma carte est uniquement charger partiellement les commandes de la carte mais pas rendu la carte réelle:

mon code HTML

<div class="my-meets-map"> 
         <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options"> 
          <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"> 
          </ui-gmap-marker> 
         </ui-gmap-google-map> 
        </div> 

Contrôleur:

$scope.map = { 
      center: { 
       latitude: 0, 
       longitude: 0 
      }, 
      zoom: 12 
     }; 
     $scope.options = { scrollwheel: true }; 
     $scope.marker = { 
      id: 1, 
      coords: { 
       latitude: 0, 
       longitude: 0 
      }, 
      show: false 
     }; 

En CSS:

.angular-google-map { 
       height: 100%; 
      } 
      .angular-google-map-container { 
       height: 100%; 
      } 

Cette capture d'écran est disponible dans les mobiles. Et dans le bureau ou la tablette, il affiche correctement.Et Si nous redimensionnons l'écran mobile en chrome, puis afficher le rendu correctement.

Merci.

Answer 1

Simplement j'ai ajouté ng-if condition où il y a carte div.

Mon HTML:

<div class="col-xs-12 my-meets-map" data-ng-if="render"> 
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options"> 
     <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"> 
     </ui-gmap-marker> 
    </ui-gmap-google-map> 
</div> 

Mon contrôleur:

$scope.render = false; 
$timeout(function() { 
    $scope.render = true; 
},0); 

En faisant cela rend notre HTML DOM après un certain temps avec toute valeur.