1

My google map is hidden and it is displayed using ng-show when I click on a previous button. The problem is that it does not load / initialize. It just stays grayed out. I've tried "resize" but does nothing. I've tried using onclick="displayMap()" and using display none/block but it's not working either. No console errors.

JJCarlk3
  • 69
  • 7
  • 1
    Well, it suppose to. Are you sure you call the resize **after** the `ng-show` shows the map? Maybe not, Try to call the resize method with `setTimeout` after the `ng-show` condition is true. Also, check [this](https://stackoverflow.com/a/6596864/863110) answer, maybe it will help. – Mosh Feu Oct 31 '17 at 13:01
  • setTimeout doesn't work, but I may not be doing it correctly.. I am at a loss. :S – JJCarlk3 Oct 31 '17 at 14:48
  • As much as I saw, the `ng-show` is this, `!validacion12()`, right? And did you try to call the resize after this function? – Mosh Feu Oct 31 '17 at 15:24
  • Resize is inside initMap(). I tried initMap() inside the conditional from validacion12() (which is in another file) but it doesn't work either. Result is: $scope.validacion12 = function() { if( $scope.codigo_regalo != null && $scope.codigo_regalo != "" && $scope.codigo_regalo == $scope.codigo_regalo_valido ) { $scope.novalid1 = "false"; displayMap(); return false; } else { $scope.novalid1 = "true"; return true; } }; – JJCarlk3 Oct 31 '17 at 16:15

2 Answers2

1

This is a known issue (see for example here), the map size is not properly determined once the parent div display style is set to none. Both ng-hide/ng-show directives hides/shows the given element by manipulating display style.

One solution would be to replace ng-show with ng-class/ng-style directives to control the map visibility as demonstrated below: 

angular.module('myApp', [])
    .controller('MapCtrl', [
        '$scope', function ($scope) {

            $scope.mapIsVisible = false;


            $scope.toggleMap = function(){
                $scope.mapIsVisible = !$scope.mapIsVisible;
            };


            $scope.initMap = function () {
                var center = new google.maps.LatLng(-33.870501, 151.206704);
                var mapOptions = {
                    zoom: 12,
                    center: center,
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                };
                $scope.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
             
            }
            google.maps.event.addDomListener(window, 'load', $scope.initMap);
        }]);
 #map-canvas {
            width: 500px;
            height: 500px;
 }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="script.js"></script>



  <div ng-app="myApp">
        <div ng-controller="MapCtrl">
            <button ng-click="toggleMap()">Toggle map</button>
            <div ng-style="{'visibility': mapIsVisible ? 'visible':'hidden'}">
                <div id="map-canvas"></div>
            </div>
        </div>
</div>
Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193
  • Thank you it does initialize now doing it like in your example, but when I input a city, it does not show the marker (nor the circle surrounding it) and if I move around the map then some parts remain grayed out, so it's like it only initializes once but then stops working.. I guess I'm gonna need to ask another question with this issue now. – JJCarlk3 Nov 01 '17 at 01:53
  • @JJCarlk3, it sounds like a different issue so creating a separate question would be a good idea – Vadim Gremyachev Nov 01 '17 at 08:47
  • Okay I don't know what happened but now it won't work even once. :S – JJCarlk3 Nov 01 '17 at 11:24
0

You can use callback for this..

function displayMap(){
    jQuery("#mapDiv").fadeIn("fast",function(){
        initMap();
    });
}
Super User
  • 9,448
  • 3
  • 31
  • 47