angular-google-maps ahora se muestra correctamente cuando está oculto al inicio
Cuando el mapa comienza oculto con ng-show / ng-hide, no se muestra correctamente una vez visible. El mismo problema con un mapa estándar, solo podemos enviarle un cambio de tamaño ya que tenemos acceso al objeto del mapa.
Aquí hay una muestra que comienza con el mapa oculto. El botón alterna la visibilidad del mapa.
<!doctype html>
<html>
<head>
<style>
.angular-google-map-container {
width: 100%;
height: 100px;
}
.mymap {
width: 100%;
height: 100px;
}
</style>
</head>
<body ng-app="app" ng-controller="myCtrl">
<button ng-click="visible = !visible">ToogleMap</button>
<div ng-show="visible">
<google-map center="map.center" zoom="map.zoom"></google-map>
<div class="mymap"></div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js'></script>
<script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src='http://underscorejs.org/underscore-min.js'></script>
<script src='https://rawgithub.com/nlaplante/angular-google-maps/master/dist/angular-google-maps.min.js'></script>
<script>
var app = angular.module("app", ["google-maps"]);
app.controller("myCtrl", function($scope, $timeout) {
$scope.map = {
center: {
latitude: 45.4,
longitude: -71.9
},
zoom: 11
};
$scope.visible = false;
});
</script>
</body>
</html>
Con google-maps en js, enviaría un cambio de tamaño al objeto del mapa, pero no tengo acceso a él en angular-google-maps.