Ionic 1 - Google Map - Javascript (web version) - grey screen when touched map in iOS only

ionic-v1
1

I am using Google Map API (Javascript) to use in ionic1, all works great including markers, directions etc, where as when I touch or tap or drag the map goes away and grey screen appears, this happens only in iOS not in android(when I try to zoom out through map control (- button), the map appears at one corner and rest of the screen is grey. With two fingers if I zoom it it gets zoom too, the moment I left it goes as grey screen. I tried trigger resize, drag, bounds_change, centre_change etc but no luck.

google.maps.event.addDomListener(document.getElementById(“map”), ‘load’, $scope.initialise());

$scope.initialise = function() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(39.8097343, -98.5556199),
draggable: true,
disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(‘map’), mapOptions);

        $scope.maptrant = map;
    };

In HTML:

index.html

Can some one help me, I am trying to fix from many hours, but no luck