Ionic-native-google-maps: App is crashed on real devices but works fine on cordova browser

[serhoney]

I'm submitting a ... (check one with "x")

• [ ] question
• [x] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [x] Android
• [x] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-add-swift-support 1.7.1 "AddSwiftSupport"
cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-buildinfo 2.0.2 "BuildInfo"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-crop 0.3.1 "CropPlugin"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-facebook4 2.5.0 "Facebook Connect"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.4.6 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-nativegeocoder 3.1.3 "NativeGeocoder"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-telerik-imagepicker 2.2.2 "ImagePicker"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-universal-links-plugin 1.2.1 "Universal Links Plugin"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)
"@ionic-native/core": "^4.18.0",
"@ionic-native/google-maps": "^4.15.1",

Current behavior:

App is crashed when I run Google Map on real devices or emulator
But when I run with ionic cordova run browser that work fine and correctly
I found same problem on other topic but i can't fix my problem and don't know causes of my problem
Have you hit on any possible causes of the problem?

Related code, data or error log (please format your code or data):
location.html

<ion-header no-border>
    <ion-navbar color="white" no-border>
      <!-- Buttons  -->
      <ion-buttons start>
        <button ion-button color="color1" clear (tap)="dismiss()">
          <ion-icon name="arrow-back" style="zoom:2.0;"></ion-icon>
        </button>
      </ion-buttons>
      <ion-buttons end>
        <button ion-button color="color1" clear (tap)="SaveLocation()">
          <b>Add</b>
        </button>
      </ion-buttons>

      <ion-title color="color1">Maps</ion-title>
    </ion-navbar>
  </ion-header>
<ion-content padding>
  <div id="map_canvas" style="height: 100%;"></div>
</ion-content>

location.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {IonicPage, Platform, ViewController,NavParams, NavController , ModalController , ToastController} from "ionic-angular";
import {GoogleMaps, GoogleMap, LatLng, GoogleMapsEvent, Environment,GoogleMapOptions , Marker, GeocoderResult, Geocoder, GeocoderRequest, BaseArrayClass} from "@ionic-native/google-maps";
import { AppConfigProvider } from '../../providers/app-config/app-config';
import { Http } from '@angular/http';
import { MylocationPage } from '../mylocation/mylocation';

@Component({
  selector: 'page-location',
  templateUrl: 'location.html',
})

export class LocationPage {

  userData : any = {};
  userSetting : any ={};
  objArrayData : any ={};
  userSelectedLocation : any;
  location_marker : any;
  map: GoogleMap;
  markerlatlong: any;
  userLocation : any;

  constructor(
    private platform:Platform,
    private googleMaps:GoogleMaps,
    public navParams: NavParams,
    public viewCtrl: ViewController,
    public appConfig:AppConfigProvider,
    public http: Http,
    public navCtrl: NavController,
    public modalCtrl: ModalController,
    public toastCtrl: ToastController,
    ) {
    }

  ngOnInit() {
    this.objArrayData = this.navParams.get('passObj');
    this.userSelectedLocation = this.navParams.get('userSelectedLocation');
  }
  ngAfterViewInit() {
    this.platform.ready().then(() => this.loadmap());
  }

  SaveLocation(){
    var webservice = this.appConfig.webAPI+"/webservice/ws_add_location.php";
      var data = JSON.stringify({
        var_userno:this.objArrayData[0].user_no,
        var_lat:this.markerlatlong.lat,
        var_lng:this.markerlatlong.lng,
        var_locality:this.location_marker.locality || this.location_marker.subLocality || "" ,
        var_city:this.location_marker.subAdminArea || "",
        var_province:this.location_marker.adminArea || "ไม่ทราบ"
      });

      this.http.post(webservice,data)
      .subscribe(data=>{
        var response = JSON.parse(data["_body"]);
        if(response.results=="success_insert"){
          this.modalCtrl.create(MylocationPage,{ passObj: this.objArrayData[0].user_no, userSelectedLocation : this.userSelectedLocation }).present();
        }
      },error=>{
        console.log(error);
      })


  }

  loadmap(){
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE' : 'MyAPIKEY',
      'API_KEY_FOR_BROWSER_DEBUG' : 'MyAPIKEY'
    });

    let position: LatLng = new LatLng(parseFloat(this.objArrayData[0].lat), parseFloat(this.objArrayData[0].lng));

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: position.lat,
          lng: position.lng
        },
        zoom: 12,
        tilt: 30
      }
    };
    this.map = GoogleMaps.create('map_canvas', mapOptions);
    this.map.on(GoogleMapsEvent.MAP_READY)
              .subscribe(() => {
                console.log('Map is ready!');

                this.map.addMarker({
                  title: 'Your Location',
                  icon: 'red',
                  animation: 'DROP',
                  draggable:true,
                  position: {
                    lat: position.lat,
                    lng: position.lng
                  }
                })
                .then(marker => {
                  marker.on(GoogleMapsEvent.MARKER_DRAG_END)
                    .subscribe(() => {
                      this.markerlatlong = marker.getPosition();
                        Geocoder.geocode({
                          position:  {"lat": this.markerlatlong.lat , "lng": this.markerlatlong.lng }
                        }).then((result) => {
                          this.location_marker = result[0];
                          console.log(this.location_marker);
                        })
                        .catch((error) => {
                          console.error("geocoder", error);
                        });
                    });
                });
              });
    }

}

[wf9a5m75]

Please share your project files on GitHub repository

[serhoney]

I found my cause of problem that i call this map page by modalCtrl.create
sorry for wasting your time . it my idiot