title: How to display google map inside ng-if div in Angular?
body: <p>I am displaying a Google Map inside an Angular (and Ionic) app.</p>
  
  <p>I have the following div in the view that is intended to show the map only if it is true. When I run this, I get an error saying "TypeError: Cannot read property 'offsetWidth' of null". I'm confused because the map div should be showing because it's parent div should evaluate to true. But for some reason, it's not displaying.</p>
  
  <p>Any adviceo on how to display the map only when map_display = 'true'?</p>
  
  <pre><code>&lt;div ng-if="map_display == 'true'"&gt;
    &lt;div id = "map" data-tap-disabled="true" style = "height:{{heightWidth}}px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My controller has:</p>
  
  <pre><code>$scope.map_display = 'true';
  
  $scope.initialise = function() {
            var myLatlng = new google.maps.LatLng(37.758446, -122.411789);
            var markersArray = [];
  
            //Initial settings for the map
            var mapOptions = {
                    center: myLatlng,
                    zoom: 2,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    styles: [{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}]
  
                };
  
            //Load the initial map
             var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
  
            //Event listener to add a marker      
            google.maps.event.addListener(map, 'click', function(e) {
              clearOverlays();
              placeMarker(e.latLng, map);
              $scope.coordinates = e.latLng;
              localStorage.userLat = $scope.coordinates.lat();
              localStorage.userLong = $scope.coordinates.lng();
            });
  
            //Actual function to add a marker
            function placeMarker(position, map) {
              var marker = new google.maps.Marker({
                position: position,
                map: map
              });
              map.panTo(position);
              markersArray.push(marker);
            }
  
            function clearOverlays() {
              for (var i = 0; i &lt; markersArray.length; i++ ) {
                markersArray[i].setMap(null);
              }
              markersArray.length = 0;
            }
  
            // $scope.map=map;
  
      };
      // End of initialise
  
      google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());
  </code></pre>