Google Maps visible on browser and on emulator but not on device

Ionic Framework ionic-v3
1

I have started to use Ionic platform for building mobile apps and I am stuck on a problem for days. I have to incorporate google maps in my app and get continous location updates of the user. I am able to achieve this on browser and emulator(ionic lab emulator) but on the real device. Below is my code.Please help me. I need the solution kind of urgently.Thanks in advance!!!

//home.ts file

export class HomePage {

@ViewChild(‘map’) mapElement: ElementRef;
map:any;
latitude:any;
longitude:any;
//map:GoogleMap;

constructor(platform:Platform,public navCtrl: NavController,
public geolocation: Geolocation,public menu:MenuController) {
this.menu.enable(true);
platform.ready().then(()=>{
this.loadMap();
})
}

loadMap(){
alert(“inside load map”);
var options_watch = {timeout:50000,frequency:1000,enableHighAccuracy:true};
let watch = this.geolocation.watchPosition(options_watch);
watch.subscribe((data) => {
// data can be a set of coordinates, or an error (if an error occurred).
this.latitude= data.coords.latitude;
this.longitude= data.coords.longitude;
let latlng = new google.maps.LatLng(this.latitude,this.longitude);
let mapOptions = {
center: latlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

 this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
 let marker = new google.maps.Marker({
   map:this.map,
   animation:google.maps.Animation.DROP,
   position:latlng
 }) 
 alert("watch "+this.latitude+"  "+this.longitude);
},(err)=>{
  let latlng = new google.maps.LatLng(0,0);
  let mapOptions = {
    center: latlng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  let marker = new google.maps.Marker({
    map:this.map,
    animation:google.maps.Animation.DROP,
    position:latlng
  }) 
  alert("error " +err); 
})

}
}

//home.scss file

page-home {

  #map {
    width: 100%;
    height: 100%;`enter code here`
    background-color: transparent;
  }

}

//home.html file //after header


<ion-content>
  <div #map id="map">
  </div>
</ion-content>

//index.html file


<script src="js/app.js"></script>
  <script src="http://maps.google.com/maps/api/js?key=KEY"></script>
  <script src="cordova.js"></script>