Failed to load google map api a second time.

Question

I am learning AngularJS and Ionic, and I am adding the Google Maps API v3 to my application.

This is my controller:

$scope.drawMap = function(position) { $scope.$apply(function() { $scope.abc.lng = resp.data[0].longit; $scope.abc.lat = resp.data[0].latit; $scope.map = { center: { latitude: $scope.abc.lat, longitude: $scope.abc.lng }, zoom: 17 }; $scope.marker = { id: 0, coords: { latitude: $scope.abc.lat, longitude: $scope.abc.lng } }; $scope.marker.options = { draggable: false, labelAnchor: "80 120", //marker position labelClass: "marker-labels" }; }); } navigator.geolocation.watchPosition($scope.drawMap); $scope.$on('$ionicView.leave', function(){ map.remove(); }); 

}); })

This is my HTML:

 <ui-gmap-google-map center='map.center' zoom='map.zoom' events="map.markersEvents"> <ui-gmap-marker coords="marker.coords" options="marker.options" idkey="marker.id"> </ui-gmap-marker> </ui-gmap-google-map> 

Also directives:

 starter.directive('googleMap', function(){ return { templateUrl:"templates/google-map.html", link: function(scope, ele, attrs){ } } }) 

resp.data has a list of latlng addresses, and I can download the map when I get to this page.

But when I return to the last page and select a different address, it cannot load the map, which I can console.log latlng .