How can I show google maps in ionic in another view?

Hi, I am trying to integrate the GOOGLE API in my Ionic project with Angular 1, I have managed to integrate it and it shows me the map. The problem is that when I create another view which has to take me to the map view, the map does not appear.

Graphic example:

index - > google.html (the map is shown)

index - > home.html - > google.html (the map is not shown)

index.html

<ion-nav-bar class="bar-stable">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view>
</ion-nav-view>

template / home.html

<ion-view view-title="HOME">
  <ion-content>
    <div class="padding">
    <button ng-click='goMap()'>Ir a Mapa Google</button>  
    </div>
  </ion-content>
</ion-view>

template / google.html

<ion-view view-title="MAPA">
        <ion-content>
            <div class="item item-input controls">
                <i class="icon ion-search placeholder-icon"></i>
                <input id="pac-input" type="text" placeholder="Search Location" data-tap-disabled="true" ng-change='disableTap()' ng-model="search">
            </div>
            <div id="map" data-tap-disabled="true"></div>       
        </ion-content>
</ion-view>

app.js

angular.module('starter', ['ionic','ngCordova', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider){

$stateProvider

.state('home', {
  url:'/home',
  templateUrl: 'templates/home.html',
  controller: 'HomeCtrl'
})

.state('google', {
  url:'/google',
  templateUrl: 'templates/google.html',
  controller: 'MapCtrl'
});

$urlRouterProvider.otherwise('/home');

});

controllers.js

angular.module('starter.controllers',[])

.controller('HomeCtrl', function($scope, $state){

    $scope.goMap = function(){
        $state.go('google');
    }

})

.controller('MapCtrl', function($scope) {

        function initialize() {
            var mapOptions = {
                center: { lat: 28.613939, lng: 77.209021 },
                zoom: 13,
                disableDefaultUI: true, // To remove default UI from the map view
                scrollwheel: false
            };

            $scope.disableTap = function() {
                var container = document.getElementsByClassName('pac-container');
                angular.element(container).attr('data-tap-disabled', 'true');
                var backdrop = document.getElementsByClassName('backdrop');
                angular.element(backdrop).attr('data-tap-disabled', 'true');
                angular.element(container).on("click", function() {
                    document.getElementById('pac-input').blur();
                });
            };

            var map = new google.maps.Map(document.getElementById('map'),
                mapOptions);

            var input = /** @type {HTMLInputElement} */ (
                document.getElementById('pac-input'));

            // Create the autocomplete helper, and associate it with
            // an HTML text input box.
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.bindTo('bounds', map);

            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            var infowindow = new google.maps.InfoWindow();
            var marker = new google.maps.Marker({
                map: map
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });

            // Get the full place details when the user selects a place from the
            // list of suggestions.
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                infowindow.close();
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    return;
                }

                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);
                }

                // Set the position of the marker using the place ID and location.
                marker.setPlace( /** @type {!google.maps.Place} */ ({
                    placeId: place.place_id,
                    location: place.geometry.location
                }));
                marker.setVisible(true);

                infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
                    'Place ID: ' + place.place_id + '<br>' +
                    place.formatted_address + '</div>');
                infowindow.open(map, marker);
            });
        }

        // Run the initialize function when the window has finished loading.
        google.maps.event.addDomListener(window, 'load', initialize);
    })