Ionic-native-google-maps: Android not launch GoogleMapsEvent.MAP_READY

[manumarquez]

I try to execute 'the basic used example' and work fine in iOS, when I try to run it on Android, it's not work. Never launch content this.map.one(GoogleMapsEvent.MAP_READY)

I register correct API Keys in Google, check version plugins, etc...

My ionic info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.9
Cordova Platforms  : android 7.0.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

Node  : v8.9.4
npm   : 5.8.0
OS    : macOS High Sierra
Xcode : Xcode 9.3.1 Build version 9E501

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

And my plugins info:

"@ionic-native/geolocation": "^4.7.0",
"@ionic-native/google-maps": "^4.8.2",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-googlemaps": "^2.3.4",

"cordova-plugin-googlemaps": {
    "API_KEY_FOR_ANDROID": "**********",
    "API_KEY_FOR_IOS": "***********",
    "PLAY_SERVICES_VERSION": "12.0.0",
    "ANDROID_SUPPORT_V4_VERSION": "24.1.0",
    "LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
    "LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
  },

Thanks you so much for help!!!

[wf9a5m75]

Please share your project files on github.

[manumarquez]

My Code

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import {AuthService} from "../../providers/auth-service/auth-service";

import { Geolocation } from '@ionic-native/geolocation';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, Marker } from '@ionic-native/google-maps';
import { LocalPage } from '../local/local';

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

export class MapPage {

auth: AuthService;

localPage: any;
map: GoogleMap;
lat: number;
long: number;

loading: boolean;
error: boolean;

constructor(public navCtrl: NavController, private googleMaps: GoogleMaps, public geolocation: Geolocation) {
  console.log('Map');
  this.auth = AuthService.authenticated();

  this.loading = true;
  this.error = false;
  this.localPage = LocalPage;
}

ionViewDidLoad(){
  this.loadMap();
}

loadMap(){

  this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((position) => {
    this.lat = position.coords.latitude;
    this.long = position.coords.longitude;
  }, (err) => {
    console.log('Error current position');
    console.log(JSON.stringify(err));
    this.error = true;
    this.loading = false;
  });

  let mapOptions: GoogleMapOptions = {
    camera: {
      target: {
        lat: this.lat, // default location
        lng: this.long // default location
      },
      zoom: 18
    },
    controls: {
      myLocationButton: true,
      zoom: true
    }
  };

  this.map = GoogleMaps.create('canv_map', mapOptions);

  // Wait the MAP_READY before using any methods.
  this.map.one(GoogleMapsEvent.MAP_READY)
  .then(() => {
    alert('map ready');
    // Now you can use all methods safely.
    this.getPosition();
    this.loading = false;
    this.error = false;
  })
  .catch(error =>{
    alert('error map ready');
    console.log(error);
  });

}

getPosition() {

  let markerIcon = {
      url: "assets/imgs/checkpoint.png",
      size: {
          width: 60,
          height: 60,
      }
  }

  this.map.moveCamera({
    target: {lat: this.lat, lng: this.long}
  }).then(() => {
    return this.map.addMarker({
      title: ' Wrong Way',
      snippet: ' Un lugar fantástico',
      icon: markerIcon,
      animation: 'DROP',
      position: {lat: this.lat, lng: this.long}
    });
  }).then((marker: Marker) => {
    marker.on(GoogleMapsEvent.INFO_CLICK).subscribe(() => {
      this.navCtrl.setRoot(LocalPage);
    });
  });

}

}

[wf9a5m75]

I said Please share your project files on github., not please paste your code.

[battika]

By the way you don't need to wait for the map ready event any longer if you
are using the latest maps plugin and ionic native plugin.

On Thu, May 24, 2018 at 7:25 PM Masashi Katsumata [e-mail]
wrote:

I said Please share your project files on github., not please paste your
code.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-native-google-maps/issues/34#issuecomment-391795005,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABJzAAOji0dzXyrCB9_L5mOgEgZ0pVe3ks5t1u0ZgaJpZM4UMkqj
.

[manumarquez]

I try to remove event to wait for the map ready, but It shows nothing.

Link to repository test --> https://github.com/manumarquez/mapTest

Thanks!!

[wf9a5m75]

Thank you for sharing your project files.

Do you understand how Promise work?

    this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((position) => {
      console.log("---->getCurrentPosition is successful");
    }, (err) => {

      console.log("---->getCurrentPosition is error");
    });

    console.log("---->creating a map");

What do you think which output is the first output?

[manumarquez]

The first output is ---->creating a map
It is right?

Thank you so much!

[wf9a5m75]

The first output is ---->creating a map.

So, in your code:

export class MapPage {
  map: GoogleMap;
  lat: number;
  long: number;


  loadMap(){
    this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((position) => {
      console.log("---->getCurrentPosition is successful");
      this.lat = position.latLng.lat;
      this.long = position.latLng.lng;
    }, (err) => {
      console.log("---->getCurrentPosition is error");
    });

    console.log("---->creating a map");

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: this.lat, // default location  <--- what's this value?
          lng: this.long // default location
        },
        zoom: 18
      }
    };

[manumarquez]

Ooouuuch!!!!

Is undefined in the first instance!

I change my code and insert into then clausure for getCurrentPosition. It would be the best way?

Thank you very much for your knowledge and sharing

[wf9a5m75]

By the way, you can write your code without geolocation plugin.

import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, Marker, LocationService, ILatLng } from '@ionic-native/google-maps';


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

export class MapPage {

  map: GoogleMap;
  latLng: ILatLng;

  loading: boolean;
  error: boolean;

  constructor(public navCtrl: NavController) {
    console.log('Map');
    this.loading = true;
    this.error = false;
  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){

    LocationService.getMyLocation({ enableHighAccuracy: true }).then((position) => {
      this.latLng = position.latLng;


      let mapOptions: GoogleMapOptions = {
        camera: {
          target: this.latLng,
          zoom: 18
        },
        controls: {
          myLocationButton: true,
          zoom: true
        }
      };

      this.map = GoogleMaps.create('canv_map', mapOptions);

      // Now you can use all methods safely.
      this.getPosition();
      this.loading = false;
      this.error = false;

    })
    .catch(error =>{
      alert('error map ready');
      console.log(error);
    });

  }

  getPosition() {

    let markerIcon = {
        url: "assets/imgs/checkpoint.png",
        size: {
            width: 60,
            height: 60,
        }
    }

    this.map.moveCamera({
      target: this.latLng
    }).then(() => {

      let marker: Marker = this.map.addMarkerSync({
          title: ' Wrong Way',
          snippet: ' Un lugar fantástico',
          icon: markerIcon,
          animation: 'DROP',
          position: this.latLng
        });
      });

      marker.on(GoogleMapsEvent.INFO_CLICK).subscribe(() => {
        alert('click marker');
      });
    });

  }

}

[kollisandy]

this fixed in my case just permission issue Click here