Login/Register
angular-google-maps does now show correctly when it's hidden at start
Asked Answered
Solved javascriptangularjsgoogle-maps-api-3angular-google-maps
M

3

5

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.

Mayman answered 16/5, 2014 at 22:29 Comment(1)
You are right, it isn't much and I would like to be able to it if I had access to the angular-google-maps map object. – Mayman
M
4

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);
    });
});
Mayman answered 17/5, 2014 at 2:28 Comment(3)
instead of using $watch on visible use this: uiGmapIsReady.promise().then(function (maps) { $scope.myGoogleMap.refresh(); }); – Arvell
Does the refresh have any effect on daily quota numbers? In other words, is one page load done this way counting as two? – Diarist
@jmq: no, it force a refresh by simulating a resize if I recall correctly. – Mayman
R
6

Try using ng-if instead ng-show/ng-hide. Angular-google-maps has an issue with ng-show /ng-hide.

See this https://github.com/nlaplante/angular-google-maps/issues/291

Ransell answered 21/5, 2014 at 15:13 Comment(2)
Thanks, I had trouble with the animation of ng-show and am now using ui-bootstrap collapse. – Mayman
This fixed the issue for me without any additional code. This is also mentioned in the angular-google-maps FAQ. – Schoolmarm
M
4

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);
    });
});
Mayman answered 17/5, 2014 at 2:28 Comment(3)
instead of using $watch on visible use this: uiGmapIsReady.promise().then(function (maps) { $scope.myGoogleMap.refresh(); }); – Arvell
Does the refresh have any effect on daily quota numbers? In other words, is one page load done this way counting as two? – Diarist
@jmq: no, it force a refresh by simulating a resize if I recall correctly. – Mayman
I
0

You need to setup map element css before showing 

                        const partMap = document.getElementById(mapDivId);


                            partMap.style.height = "400px";
                            partMap.style.width = "800px";
                            partMap.style.marginLeft = 'auto';
                            partMap.style.marginRight = 'auto';
                            const center = new google.maps.LatLng(center_lat, center_lon);
                            const mapOptions = {
                                zoom: 8,
                                scrollwheel: false,
                                center: center,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            };

Google map does not work when element does not have explicit styling and somehow styling information is not available when element is in "ng-hide" mode.

Investiture answered 9/1, 2019 at 0:2 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.