ng-map shows partial map in HTML

Question

I'm using ng-map in Angular.js For some reason my map picture is grayed out for 90% of the entire map, like so:

My HTML is pretty simple:

<div id="map">
<map></map>
</div>

I've even tried to add CSS like so:

<style>
    #map{
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
   }
</style>

Here is my controller:

$scope.$on('mapInitialized', function(event, map) {
  $scope.map.setCenter(new google.maps.LatLng($scope.location.latitude, $scope.location.longitude));
  $scope.setZoom(4);
}

I have added the scripts for using ngMap. I have also removed any AdBlock if that might cause the issue.

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

Answer 1

When your map was initialized, it was done so in a container with no dimensions (0 width and/or 0 height). So the map doesn't know what size it needs to be.

You should explicitly set width and height dimensions on your element before your map is initialized, or, failing that, call google.maps.event.trigger(map,'resize'); (where map is an instance of a google map) if your map was initialized on a hidden element (no width/height) that becomes visible.

NOTE:

Setting #map to be height:100% has no effect unless #map's parent element has an explicit height. Go ahead, set #map to be height: 300px and you'll see it "works" all of a sudden.

If you want the map to be full screen, then you have to set the height of the html/body elements:

html,body,#map { height: 100%; }