Google maps only loads on refresh, but not when I come from another page

ionic-v1
1

I am trying to show a Google Maps street view, but am having trouble getting it work. When I go from another page to this page, it doesn’t load. But I refresh this current page, then the street view works. Any idea on how to fix this?

controllers.js

.controller('StreetviewCtrl', function($scope, $ionicLoading, $state, $stateParams){
	console.log('Street view page loaded');

	Parse.initialize("xyz", "xyz");

  //Load the Goog map
	$scope.initialise = function() {

	console.log('initialize function');

    var myLatlng = new google.maps.LatLng(40.758774,  -73.98504);
		
		var mapOptions = {
            center: myLatlng,
            zoom: 1,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        var map = new google.maps.Map(document.getElementById("street"), mapOptions);
        
        var panoramaOptions = {
	    	position: myLatlng,
        	addressControl: false,
	    	pov: {
	      		heading: 34,
	      		pitch: 10
	    	}
	  	};
        
	  	var panorama = new google.maps.StreetViewPanorama(document.getElementById('street'), panoramaOptions);

      $scope.map=panorama;

	};

	google.maps.event.addDomListener(document.getElementById("street"), 'load', $scope.initialise());
	

	//Go to the guessing page
	$scope.makeGuess = function(item,event){
		console.log('guess button tapped');
		// $state.go('tab.account');
	};


})

template (streetview.html)

<ion-view title="Where are you?">
  <ion-content class="padding">
    
  	<center>
	    <button on-touch="makeGuess()" class="button button-full button-positive">
	  		Make a Guess <i class="ion-arrow-right-a"></i>
		</button>
	</center>

    <div id="street" data-tap-disabled="false"></div>
    
  </ion-content>
</ion-view>