CODEWITHSUNDEEP
javascripthtmlcssangularjsgoogle-maps
user2874945
user2874945

Reputation: 308

ng-map shows partial map in HTML

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

Upvotes: 5

Views: 4901

Answers (3)

Florin Dobre
Florin Dobre

Reputation: 10232

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');
});

Upvotes: 0

kazmer
kazmer

Reputation: 521

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");
    });

Upvotes: 0

Adam Jenkins
Adam Jenkins

Reputation: 55623

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

Upvotes: 5

Related Questions