Google maps not rendered properly

[rahulchavan30]

I am using ng-show ,when the user clicks on the map button the map must be shown but i get only half of the map rendered

[wpalahnuk]

try firing the resize event on the map when you show the map

google.maps.event.trigger($scope.map, 'resize');

[rahulchavan30]

Sorry i dint get you ,where should i use the above code i have the infocontroller and the js file where all the directive and the controller is defined ,could you please elaborate it will be very helpful

[wpalahnuk]

Generally when you resize the div that holds the google map, such as with ng-show, you need to fire that event to make the map resize to the div's new size.

As to where to put this specifically, I can't really say without seeing the actual code. A guess would be to set up a $watch on whatever variable you are using for the ng-show and fire the event in a $timeout block. If you want something more specific set up a jsfiddle or Plunkr and I'll look it over.

[dylanfprice]

Since you generally don't have the map stored in your scope unless you put it there manually, you can also use the following in your controller:

$scope.$broadcast('gmMapResize', 'myMapId')

This is in the docs for gmMap.

As wpalahunk said, you should do this whenever you show the map, perhaps by using a $watch expression.

[rahulchavan30]

Thanks a lot it did work..