angular-google-maps does now show correctly when it's hidden at start

angular-google-maps, angularjs, google-maps-api-3, javascript

Solution

I found the solution here

Add a control attribute to the google-map tag:

<google-map
    center="mapOption.center"
    zoom="mapOption.zoom"
    control="myGoogleMap">
</google-map>

Then in the controller, set $scope.myGoogleMap to {}, it will be filled when the maps get initialized. After that you can use $scope.myGoogleMap.refresh() to send a resize to the map !

Here's the controller working.

app.controller("myCtrl", function($scope, $timeout) {
    $scope.mapOption = {
         center: {
             latitude: 45.4,
             longitude: -71.9
         },
         zoom: 11
    };
    $scope.visible = false;
    $scope.mapViewPosition = {};
    $scope.$watch("visible", function(newvalue) {
        $timeout(function() {
             var map = $scope.myGoogleMap.refresh();
        }, 0);
    });
});

Problem

When map starts hidden with ng-show/ng-hide, it does not show correctly once visible. Same trouble with a standard map, only we can send a resize to it since we have access to the map object. Here's a sample that starts with the map hidden. The button toggle the visibility of the map. ``` <!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> ``` With google-maps in js, I would send a resize to the map object, but I don't have access to it in angular-google-maps.

Original source