title: Google Maps doesn't show up in a Modal Ionic
body: <p>I've been integrating Google maps to my ionic app by following <a href="https://www.joshmorony.com/integrating-google-maps-with-an-ionic-application/" rel="nofollow noreferrer">https://www.joshmorony.com/integrating-google-maps-with-an-ionic-application/</a>
  this tutorial. I've integrated the map to a view without issues and it's detecting the location. But when I try to add the map into an modal I'm getting blank modal without a map in it. </p>
  
  <p>I've checked <a href="https://stackoverflow.com/questions/37565571/google-maps-not-showing-in-ionic-modal">Google Maps not showing in Ionic Modal</a> , and as I'm loading the map after the HTML template is loaded I don't think it will be helpful.</p>
  
  <p>This is my modal code which includes map.</p>
  
  <pre><code>&lt;script id="location.html" type="text/ng-template"&gt;
        &lt;ion-modal-view&gt;
          &lt;ion-content&gt;
            &lt;div&gt;
              &lt;div id="map" data-tap-disabled="true"&gt;&lt;/div&gt;
            &lt;/div&gt;       
            &lt;button class="button button-block button-dark " ng-click="closeModal()"&gt; Close&lt;/button&gt;
          &lt;/ion-content&gt;
  
        &lt;/ion-modal-view&gt;
      &lt;/script&gt; 
  </code></pre>
  
  <p>This is my controller code which I use to open the modal.</p>
  
  <pre><code>$ionicModal.fromTemplateUrl('location.html', {
      scope: $scope,
      animation: 'slide-in-up'
   }).then(function(modal) {
      $scope.modal = modal;
   });
  
    $scope.detectLocation = function() {
      $scope.modal.show();
      $scope.loadgooglemap();
    };
    $scope.closeModal = function() {
      $scope.modal.hide();
    };
    // Cleanup the modal when we're done with it!
    $scope.$on('$destroy', function() {
      $scope.modal.remove();
    });
    // Execute action on hide modal
    $scope.$on('modal.hidden', function() {
      // Execute action
    });
    // Execute action on remove modal
    $scope.$on('modal.removed', function() {
      // Execute action
    });
  
    $scope.loadgooglemap = function(){
      var options = {timeout: 10000, enableHighAccuracy: true};
  
      $cordovaGeolocation.getCurrentPosition(options).then(function(position){
  
      var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  
      var mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
      //Wait until the map is loaded
      google.maps.event.addListenerOnce($scope.map, 'idle', function(){
  
        var marker = new google.maps.Marker({
            map: $scope.map,
            animation: google.maps.Animation.DROP,
            position: latLng
        });      
  
        var infoWindow = new google.maps.InfoWindow({
            content: "Here I am!"
        });
  
        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.open($scope.map, marker);
        });
  
      });
      }, function(error){
        console.log("Could not get location");
      });
  
    }
  </code></pre>
  
  <p>I'm not getting any error when I open the modal. Just getting the modal with the Close button(which I've included in the modal).</p>
  
  <p>What might be the reason the map isn't loading in the modal. What have I done wrong? Can anyone help me with this ?</p>