{"action":"created","issue":{"url":"https://api.github.com/repos/angular-ui/angular-google-maps/issues/1322","labels_url":"https://api.github.com/repos/angular-ui/angular-google-maps/issues/1322/labels{/name}","comments_url":"https://api.github.com/repos/angular-ui/angular-google-maps/issues/1322/comments","events_url":"https://api.github.com/repos/angular-ui/angular-google-maps/issues/1322/events","html_url":"https://github.com/angular-ui/angular-google-maps/issues/1322","id":78150506,"number":1322,"title":"Map rendering on height change","user":{"login":"SaleGajic","id":9561021,"avatar_url":"https://avatars.githubusercontent.com/u/9561021?v=3","gravatar_id":"","url":"https://api.github.com/users/SaleGajic","html_url":"https://github.com/SaleGajic","followers_url":"https://api.github.com/users/SaleGajic/followers","following_url":"https://api.github.com/users/SaleGajic/following{/other_user}","gists_url":"https://api.github.com/users/SaleGajic/gists{/gist_id}","starred_url":"https://api.github.com/users/SaleGajic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SaleGajic/subscriptions","organizations_url":"https://api.github.com/users/SaleGajic/orgs","repos_url":"https://api.github.com/users/SaleGajic/repos","events_url":"https://api.github.com/users/SaleGajic/events{/privacy}","received_events_url":"https://api.github.com/users/SaleGajic/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular-ui/angular-google-maps/labels/documentation","name":"documentation","color":"5319e7"},{"url":"https://api.github.com/repos/angular-ui/angular-google-maps/labels/question","name":"question","color":"207de5"}],"state":"closed","locked":false,"assignee":{"login":"pcbulai","id":949571,"avatar_url":"https://avatars.githubusercontent.com/u/949571?v=3","gravatar_id":"","url":"https://api.github.com/users/pcbulai","html_url":"https://github.com/pcbulai","followers_url":"https://api.github.com/users/pcbulai/followers","following_url":"https://api.github.com/users/pcbulai/following{/other_user}","gists_url":"https://api.github.com/users/pcbulai/gists{/gist_id}","starred_url":"https://api.github.com/users/pcbulai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pcbulai/subscriptions","organizations_url":"https://api.github.com/users/pcbulai/orgs","repos_url":"https://api.github.com/users/pcbulai/repos","events_url":"https://api.github.com/users/pcbulai/events{/privacy}","received_events_url":"https://api.github.com/users/pcbulai/received_events","type":"User","site_admin":false},"milestone":null,"comments":4,"created_at":"2015-05-19T16:08:13Z","updated_at":"2015-09-26T11:50:30Z","closed_at":"2015-07-27T18:36:49Z","body":"I am trying to make map with initial 50px height, but when button is clicked, map should change height to 400px. I did this with pure CSS, and my CSS looks like this:\r\n``` CSS\r\n.angular-google-map-container { height: 400px; position:relative;}\r\n.collapsed .angular-google-map-container {height: 50px;}\r\n.angular-google-map-container {transition: all 0.5s ease}\r\n```\r\nOf course, i ran into standard issue when resizing map. But i don't know how should i properly call resize event on my map. I did found workaround but it's pretty messy.\r\nMy template looks like this:\r\n``` HTML\r\n<div class=\"row\" ng-class=\"{'collapsed':mapCollapsed}\">\r\n  <ui-gmap-google-map center=\"map.center\" zoom=\"map.zoom\" draggable=\"true\" events=\"map.events\"></ui-gmap-google-map>\r\n</div>\r\n<div class=\"row\" style=\"text-align: center; border:1px; background:lightgray; cursor:pointer; padding:10px;\" ng-click=\"toggleCollapsMaps()\">SHOW/HIDE Map</div>\r\n```\r\nAnd my javascript looks like this:\r\n``` javascript\r\n    var mapRef;\r\n    $scope.map = {\r\n        center: {latitude: 58.1473727, longitude: 7.9973672 },\r\n        zoom: 12,\r\n        events: {\r\n            bounds_changed: function (map) {\r\n                $scope.$apply(function () {\r\n                    mapRef=map;\r\n                });\r\n            }\r\n        }}\r\n    $scope.options = {\r\n      scrollwheel: true\r\n    };\r\n\r\n      $scope.mapCollapsed=true;\r\n      $scope.toggleCollapsMaps = function(){\r\n          $scope.mapCollapsed = !$scope.mapCollapsed;\r\n          if(!$scope.mapCollapsed){\r\n              $timeout(\r\n                  function(){\r\n                      google.maps.event.trigger(mapRef, 'resize')\r\n                  },500);\r\n\r\n          }\r\n      }\r\n```\r\nI am saving reference to map on event i expect to be called before someone click on SHOW/HIDE map, then when map is opening, i am waiting 500ms before calling resize, to be sure that CSS transition is over. Still during the transition map is not rendered well. :(\r\n\r\nAny advice on resizing?"},"comment":{"url":"https://api.github.com/repos/angular-ui/angular-google-maps/issues/comments/143426155","html_url":"https://github.com/angular-ui/angular-google-maps/issues/1322#issuecomment-143426155","issue_url":"https://api.github.com/repos/angular-ui/angular-google-maps/issues/1322","id":143426155,"user":{"login":"UnnikrishnanBhargavakurup","id":825646,"avatar_url":"https://avatars.githubusercontent.com/u/825646?v=3","gravatar_id":"","url":"https://api.github.com/users/UnnikrishnanBhargavakurup","html_url":"https://github.com/UnnikrishnanBhargavakurup","followers_url":"https://api.github.com/users/UnnikrishnanBhargavakurup/followers","following_url":"https://api.github.com/users/UnnikrishnanBhargavakurup/following{/other_user}","gists_url":"https://api.github.com/users/UnnikrishnanBhargavakurup/gists{/gist_id}","starred_url":"https://api.github.com/users/UnnikrishnanBhargavakurup/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/UnnikrishnanBhargavakurup/subscriptions","organizations_url":"https://api.github.com/users/UnnikrishnanBhargavakurup/orgs","repos_url":"https://api.github.com/users/UnnikrishnanBhargavakurup/repos","events_url":"https://api.github.com/users/UnnikrishnanBhargavakurup/events{/privacy}","received_events_url":"https://api.github.com/users/UnnikrishnanBhargavakurup/received_events","type":"User","site_admin":false},"created_at":"2015-09-26T11:50:30Z","updated_at":"2015-09-26T11:50:30Z","body":"@ pcbulai - It's working like a magic :+1: "}}