Ionic-native: Google Maps: "Can't find variable 'plugin'" error

[arielweinberger]

I am trying to use the Google Maps plugin, like so:

import {Component} from "@angular/core";
import {GoogleMap, GoogleMapsEvent} from "ionic-native";

@Component({
  templateUrl: 'build/pages/map/map.html'
})
export class MapPage {
  constructor() {}

  ngOnInit() {
    let map = new GoogleMap('.map-canvas');
    map.on(GoogleMapsEvent.MAP_READY).subscribe(() => console.log("Map is ready!"));
  }
}

And I get this error:
"EXCEPTION: Error: Uncaught (in promise): ReferenceError: Can't find variable: plugin"

Using Ionic 2.0 beta 9, and Ionic Native version 1.3.0.

Any ideas?

[ihadeed]

You need to wrap it with platform.onReady(), and you might need to move your code to be inside the constructor as well.

[arielweinberger]

Alright so I have installed the plugins and the problem was gone. Now for some reason there is a blank screen on my iPhone when I try to view the map. Any idea was causes this?

[ihadeed]

Not sure, I haven't tested this on iOS yet.

Can you try to see if there are any logs from the Google Maps plugin?

Also check that you provided the variable --variable API_KEY_FOR_IOS while installing the plugin, see package.json

[arielweinberger]

No, nothing. No errors in XCode at all, or in Safari developer debug. The application is clear from any errors.

I also get the "Map ready!" console log.

[guillenotfound]

You have to use an ID, not a class.