Intitially map loads in container with blank space

[jimishio]

I am using angular google maps in my

element. Now when I go to that angular module, map screen is there but I can't see the map loaded into that div area.. all I can see is blank gray space without any map.
But after resizing window or opening javascript console maps shows up.

See the images : http://imgur.com/a/0k2Gq

Please let me know if someone has faced this issue before. or know solution of this.

[buildtheui]

same issue for me :(, and the controls are no loaded too

[jimishio]

@whispers16 is there any way I can refresh map manually?
like reload or something which we can perform in our controller and it reflects on html.

[dvelasquez]

I'm having the same issue.

I downgrade the version of Angular & Angular Material to

Angular: 1.4.10
Angular Material: 1.0.6

And is working!

[buildtheui]

@jimishparekh the only way is to create a trigger inside a trigger event, or somthing like: $scope.map.control.refresh($scope.map.center); but TBH nothing of that is working for me :(

@dvelasquez I downgrade angular and also did it with others angular versions, and nothing is working :(

I have done everything, and I know that the tiles are being fetch, but not rendered because I did this:

$scope.map = { control: {}, 
          center: { latitude: 4.6383843, longitude: -74.0820583 }, 
          zoom: 10,
          events: {
            tilesloaded: function (map) {
                $scope.$apply(function () {
                    console.log("tilesloaded");
                    google.maps.event.trigger(map, 'resize');

                });
            } 
        }

        };

and the console shows that the tiles are being fetch but nothing seems to render, even the control buttons are not rendered either :(

do you have any idea? or someone?

[buildtheui]

well!!! I digged into my code thinking that it was a js file, and then I found it was a css problem, it seems google maps has a problem with:

img {
  max-width: 100% !important;
}

to have responsive images, finally after many hours!!! that was it!

[davidsojeda]

Take a look to Angular Google Maps FAQ, in "My map is only partially rendering!" section.

For me, ng-if fixed the problem.

[jimishio]

@davidsojeda Same here.. sorry for late reply though.