Ionic - Google Map Java Script api working on browser...but not displaying Map in Device

Hi ,

I have implemented Google Maps Java script api in my app. I am finding the current location using Geolocation and displaying the nearby places like banks…etc…The app works fine on browser…but goes not work on the device…I see a blank screen in the app…
Following is the code:

import { Component, ViewChild, ElementRef,OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
 
declare var google;
 
@Component({
  selector: 'maplocation',
  templateUrl: 'maplocation.html'
})
export class MaplocationComponent implements OnInit {
 
    @ViewChild('map') mapElement: ElementRef;
    map: any;
    latLng : any;
  
    constructor(public navCtrl: NavController,public geolocation: Geolocation) {
      console.log("inside MaplocationComponent constructor");
    }
  
    ngOnInit() {
      console.log("inside MaplocationComponent ngOnInit");
      this.loadMap();
    }
  
    loadMap() {
  
      this.geolocation.getCurrentPosition().then((position) => {

        console.log("inside geolocation");
  
        this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        console.log("latLng created"); 

        let mapOptions = {
          center: this.latLng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    
        this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
        console.log("map created");   
        var service = new google.maps.places.PlacesService(this.map);
        console.log("service created");  
        var self = this;
        service.nearbySearch({
                location: this.latLng,
                rankBy:google.maps.places.RankBy.DISTANCE,
                type: ['bank']
              }, 
              function(results, status) {
                if (status === google.maps.places.PlacesServiceStatus.OK) {
                  for (var i = 0; i < results.length; i++) {
                      let marker = new google.maps.Marker({
                        map: self.map,
                        position: results[i].geometry.location
                      });
  
                      let infoWindow = new google.maps.InfoWindow({
                        content: results[i].name
                      });
                        
                      google.maps.event.addListener(marker, 'click', () => {
                        infoWindow.open(self.map, marker);
                      });
                  }
                }
              }
          );     
        }, (err) => {
          console.log("Geolocation Error: " + err);
        });
    }

}

I also added the following line in index.html:

  <script src="https://maps.googleapis.com/maps/api/js?key=[KEYCODE]&libraries=places&sensor=true"></script>

I searched for the solutions online…but nothing working for me…Please Please help.

remove the sensor and try again.

I tried that also…Google Maps Javascript api does not seem to work with the native Geolocation…in case of device… When I hardcode the current location and then plot the map…it works…but does not work inside the Geolocation Current positions handler…I also tried the watchPosition menthod of ionic native Geolocation and then plot the map…but again…it works in browser…but not on device(blank screen)…