Cómo actualizar el mapa cuando cambias el tamaño de tu div
No basta con llamar. google.maps.event.trigger(map, 'resize');
También debe restablecer el centro del mapa.
var map;
var initialize= function (){
...
}
var resize = function () {
if (typeof(map) == "undefined") {) {
// initialize the map. You only need this if you may not have initialized your map when resize() is called.
initialize();
} else {
// okay, we've got a map and we need to resize it
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
}
}
Cómo escuchar el evento de cambio de tamaño
Angular (colapso ng-show o ui-bootstrap)
Vincula directamente a la visibilidad del elemento en lugar de al valor vinculado a ng-show, porque $ watch puede dispararse antes de que se actualice ng-show (por lo que el div seguirá siendo invisible).
scope.$watch(function () { return element.is(':visible'); },
function () {
resize();
}
);
jQuery .show ()
Use la devolución de llamada incorporada
$("#myMapDiv").show(speed, function() { resize(); });
Bootstrap 3 Modal
$('#myModal').on('shown.bs.modal', function() {
resize();
})