Angular-Google-Maps wird jetzt korrekt angezeigt, wenn es beim Start ausgeblendet wird

Question

May 17, 2014, 12:29 AM

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

Angular-Google-Maps wird jetzt korrekt angezeigt, wenn es beim Start ausgeblendet wird

Wenn die Karte mit ng-show / ng-hide ausgeblendet wird, wird sie nicht richtig angezeigt, sobald sie sichtbar ist. Dasselbe Problem mit einer Standardkarte, nur wir können eine Größenänderung an sie senden, da wir Zugriff auf das Kartenobjekt haben.

Hier ist ein Beispiel, bei dem die Karte ausgeblendet ist. Die Schaltfläche schaltet die Sichtbarkeit der Karte um.

<!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>

Mit google-maps in js würde ich eine Größenänderung an das Kartenobjekt senden, aber ich habe in eckigen google-maps keinen Zugriff darauf.

Zu kommentieren