ionic-team / ionic-native-google-maps

Google maps plugin for Ionic Native
Other
221 stars 125 forks source link

App is crashed on real devices but works fine on cordova browser #144

Closed serhoney closed 5 years ago

serhoney commented 5 years ago

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

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

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 commented 5 years ago

Please share your project files on GitHub repository

serhoney commented 5 years ago

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