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

possible duplicate of [How do I resize a Google Map with JavaScript after it has loaded?](http://stackoverflow.com/questions/743214/how-do-i-resize-a-google-map-with-javascript-after-it-has-loaded) — laughingpine, May 25 '15 at 18:49

Adam Jenkins · Accepted Answer · 2015-05-25T18:33:31.380

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

google.maps.event.trigger(map,'resize'); worked! Thanks! – user2874945 May 25 '15 at 21:16 — user2874945, May 25 '15 at 21:16

score 0 · Answer 2 · answered Jun 28 '15 at 03:18

I've looked into ng-map's source code, and i found this piece:

  /**
   * if style is not given to the map element, set display and height
   */
  if (getStyle(element[0], 'display') != "block") {
    element.css('display','block');
  }
  if (getStyle(element[0], 'height').match(/^(0|auto)/)) {
    element.css('height','300px');
  }

It will use the height (and possibly the width) attribute on the map element. So the easyest solution to your problem is to simply set the width and height on the map:

<div id="map">
<map style="width:100%;height:100%;"></map>
</div>

EDIT: ng-map will call google.maps.event.trigger(map,'resize'); right after setting the height of the div, so you don't have to.

/**
     * resize the map to prevent showing partially, in case intialized too early
     */
    $timeout(function() {
      google.maps.event.trigger(map, "resize");
    });

score 0 · Answer 3 · answered Nov 22 '16 at 21:02

I had same problem when navigating between 2 views using ui-router (each view had its own map). I fixed the problem by setting map's container width and height to 100%, adding an id to the ng-map in html and by adding the next code into the controller of the state:

NgMap.getMap({id: 'myMapId' }).then(function(map) {
    google.maps.event.trigger(map, 'resize');
});

ng-map shows partial map in HTML

3 Answers3

Linked