javascript - ng-map shows partial map in HTML - Stack Overflow

admin管理员组

文章数量:1332395

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

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

• javascript
• html
• css
• angularjs
• google-maps

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked May 25, 2015 at 18:15 user2874945user2874945 30877 silver badges1616 bronze badges 2

• possible duplicate of How do I resize a Google Map with JavaScript after it has loaded? – laughingpine Commented May 25, 2015 at 18:49
• Make sure map's father element has correct dimensions. – AndreaM16 Commented May 25, 2015 at 20:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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

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

本文标签： javascriptngmap shows partial map in HTMLStack Overflow