Ошибка карты Google - Ошибка ссылки: Google не определен в приложении ionic 3

Question

Я загружаю карту Google на свою страницу приложения ionic 3.Когда я загружаю приложение с помощью браузера, страница загружается нормально, но когда я делаю apk приложения (используя ionic cordova build android --prod), карта не загружается и выдает исключение, если ReferenceError: Google неопределен .Я гуглил несколько дней и применил все решения, которые получил, но не использовал вообще.Может кто-нибудь, пожалуйста, помогите мне решить эту проблему.

Мой код map.ts выглядит следующим образом:

 import {Component, ViewChild, ElementRef} from '@angular/core';
    import {IonicPage, NavController, NavParams, PopoverController, LoadingController, MenuController} from 'ionic-angular';
    import {Keyboard} from '@ionic-native/keyboard';
    import {Geolocation, Geoposition} from '@ionic-native/geolocation';
    import {NativeGeocoder, NativeGeocoderReverseResult} from '@ionic-native/native-geocoder';
    import {LocationAccuracy} from '@ionic-native/location-accuracy';

declare var google: any;

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class Map {

  latLng: any;
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  showFooter: boolean = true;

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public popoverCtrl: PopoverController,
              private geolocation: Geolocation,
              public locac: LocationAccuracy,
              public loadingCtrl: LoadingController,
              public keyboard: Keyboard,
              private menu: MenuController,
              public geocoder: NativeGeocoder,) {
  }

   ionViewDidLoad() {
     this.getLocation();
     this.menu.swipeEnable(false);
  }

getLocation() {

    this.geolocation.getCurrentPosition().then((resp) => {

      let map = new google.maps.Map(document.getElementById('map'));
      var uluru = {lat: -25.363, lng: 131.044};
      this.latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
      let mapOptions = {
        center: this.latLng,
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        enableHighAccuracy: true
      };

      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: this.latLng,
        center: this.latLng,
        icon: {
          url: 'assets/img/pin.png',
          size: new google.maps.Size(25, 48)
        },
        optimized: false,
      });

      // geocode reverse
      var geocoder = geocoder = new google.maps.Geocoder();

      var latlng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
      geocoder.geocode({'latLng': latlng}, function (results, status) {
        console.log(results);
        alert('Status : ' + status);
        this.currentLocation = this.value = "My value";
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[1]) {
            document.getElementById("currentlocation").setAttribute('value', results[1].formatted_address);
          }
        }
      });
      // geocode reverse end

      // Route and direction
      var source, destination;
      var directionsDisplay;
      var directionsService = new google.maps.DirectionsService();
      directionsDisplay = new google.maps.DirectionsRenderer({'draggable': true});

      // current location input
      let currentlocationinput = document.getElementById('currentlocation');
      let currentlocationsearchBox = new google.maps.places.SearchBox(currentlocationinput);
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(currentlocationinput);

      // destination location input
      let destinationinput = document.getElementById('destination');
      let destinationsearchBox = new google.maps.places.SearchBox(destinationinput);
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationinput);

      // Direction
      var directionsService = new google.maps.DirectionsService;
      var directionsDisplay = new google.maps.DirectionsRenderer;
      directionsDisplay.setMap(map);

      // on drag and dragend header style change
      this.map.addListener('dragstart', function (event) {
        document.querySelector(".header")['style'].transform = 'translate3d(0px, -320px, 0px)';
        document.querySelector(".scroll-content").classList.add("no_margin");
        document.querySelector(".footer")['style'].transform = 'translate3d(0px, 320px, 0px)';
      });
      this.map.addListener('dragend', function (event) {
        document.querySelector(".header")['style'].transform = 'translate3d(0px, 0px, 0px)';
        document.querySelector(".scroll-content").classList.remove("no_margin");
        document.querySelector(".footer")['style'].transform = 'translate3d(0px, 0px, 0px)';
      });
      // on drag and dragend header style change end

    }).catch((error) => {
      alert(error);
      console.log('Error getting location', error);
    })

  }
}

Я вешаю это на несколько дней.если кто-нибудь может решить, пожалуйста, помогите мне.Заранее спасибо.

Answer 1

[решено]

Почти готов сдаться, пока я не наткнулся на его ответ.

Марк Веенстра - Решение уже здесь

Может бытьполезно для тех, кто зависает с той же проблемой, что и я.

Приветствия .. !!

Answer 2

Убедитесь, что

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>

вы можете добавить его в index.js или нет

я думаю, что карты не загружаются при доступе к нему.