Angular- Display google map in spezifische ID

Question

Ich möchte zeigen Google Karte innerhalb spezifischen Container in UI-Booststrap modal mit Angularjs. Hier ist mein Code:

HTML:

<script type="text/ng-template" id="mapModalContent.html"> 
    <div class="map-container" ng-class="{'open' : openMapContainer}"> 
     <div class="header-section"> 
     header 
     </div> 
     <div class="close-btn"><i class="icon icon-cancel"></i></div> 
     <div id="map-test" class="map-test"></div> 
     <div id="map-content"></div> 
     <div class="footer-section"></div> 
    </div> 
</script> 

Eckig:

var modalInstance = $uibModal.open({ 
     templateUrl: 'mapModalContent.html', 
     scope: $scope, 
     windowClass: 'mapModal', 
     size: 'lg', 
     resolve: { 
      data: function() { 
       return $scope; 
      } 
     } 
    }); 
     modalInstance.opened.then(function() { 
      console.log('opened'); 
     }); 
    } 
    $scope.$watch('data', function(value){ 
     if(typeof value !== 'undefined') { 
      searchLatLng = new google.maps.LatLng($scope.data.latitude, $scope.data.longitude); 

      googleMap = new google.maps.Map($element.find('.map-content'), { 
       center: {lat: -34.397, lng: 150.644}, 
       zoom: 8 
      }); 
      searchMarker = new google.maps.Marker({ 
       position: searchLatLng, 
       map: googleMap, 
       draggable: true 
      }); 
      google.maps.event.addListener(searchMarker, 'dragend', function() { 
       scope.$apply(function() { 
        $scope.data.latitude = searchMarker.getPosition().lat(); 
        $scope.data.longitude = searchMarker.getPosition().lng(); 
       }); 
      }.bind(this)); 

      var myPosition = new google.maps.LatLng($scope.data.latitude, $scope.data.longitude); 
      searchMarker.setPosition(myPosition); 
     } 
    }, true); 
}  

In Konsole, erhalte ich

geöffnet (für die Öffnung der modal)

und

Eigentlich Karte noch nicht geladen. Irgendein Vorschlag?

Answer 1

Wenn ich richtig verstehe, gibt es eine graue Box.

Können Sie dies versuchen:

modalInstance.opened.then(function() { 
    console.log('opened'); 
    google.maps.event.trigger(googleMap, "resize"); 
}); 

Grey boxes appear in parts of embedded Google Map in modal box