Ionic google map is not loading on ios but working on browser - ios

Question

I am trying to load google map in ionic app environment. It works on perfectly on browser. But, I can only see my tabs with a blank screen in the place of map when I load the app on to iphone and simulator. I tried with both google browser api key and also with ios key. Please help me.
Here is my controller and html.
controller:
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope, $state, $cordovaGeolocation, $ionicLoading ) {
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");
});
//center function
$scope.centerOnMe = function () {
console.log("Centering");
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
template: '<ion-spinner class="spinner-energized"></ion-spinner>',
showBackdrop: false
});
$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.loading.hide();
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
});
}
})
here is my HTML:
<ion-view view-title="mymap">
<ion-content>
<div id="map" style="width: 100%;height: 100%;" data-tap-disabled="true"> </div>