Google maps from ionic-native

[brozada]

Somebody here using google maps from ionic-native?
I’ve tried, but even the class name in doc doesn’t match the one in code.
According docs:

import {GoogleMaps, GoogleMapsEvent} from 'ionic-native';
...
let map = new GoogleMaps('elementID');
map.on(GoogleMapsEvent.MAP_READY).subscribe(() => console.log("Map is ready!"));

but the real class name in node-modules/ionic-native/dist/plugins/googlemaps.d.ts code is GoogleMap.
Anyway, triing:

import {GoogleMap, GoogleMapsEvent} from 'ionic-native';
...
let map = new GoogleMap('elementID');
map.on(GoogleMapsEvent.MAP_READY).subscribe(() => console.log("Map is ready!"));

gives me an:
browser_adapter.js:77 EXCEPTION: Error: Uncaught (in promise): ReferenceError: plugin is not defined

Any hint in how to use this.

PD: I’m trying to use directions service in ionic 2

[nicksta]

Have you installed the google maps plugin?

[brozada]

I think so, by doing:
ionic plugin add cordova-plugin-googlemaps

[webprofusion]

This plugin is for native google maps and you might be better including the javascript SDK etc if you want to use the directions service etc. This plugin requires special API keys which are bound to you app identifier.

More details available at: https://github.com/mapsplugin/cordova-plugin-googlemaps

[brozada]

Yes, I had provided the API keys during plugin install, sorry for not indicate it:

ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="my_key_was_here" --variable API_KEY_FOR_IOS="my_key_was_here"```

IMHO, I think that the issue is about GoogleMap name being used in ionic-native and GoogleMaps with ending 's' in cordova, but I've not enough knowledge to support this.

[iignatov]

@brozada

Somebody here using google maps from ionic-native?

Could you provide more information - are you testing on a real device, emulator or browser?

[wswoodruff]

I’m in a similar situation, I’ve installed the ionic native google maps plugin like OP, including my Android and iOS API keys when I ran the command, as he indicated in his 2nd post.

The docs for the Google maps plugin are outdated. https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Tutorial-for-Mac
The installation guide says it’s important to download Android 4.x SDK tools, which I did, and things still don’t work. I’ve tried in the browser and uploaded the Ionic App via ionic upload, tested on my phone using Ionic View, same result.

I think it’s just time to use the JavaScript SDK and let that be fine for now.

[brozada]

I tested it only by serve command.
Using Google maps js libraries through index.html or following joshmorony tutorial works fine. I think that the issue is only related to ionic-native

[iignatov]

@brozada

I tested it only by serve command.

Well, there’s a reason for which the package is called ionic-native it’s for native plugins targeting real devices, i.e. they won’t work in the browser.

[aaronksaunders]

did you enable the APIs in your google developer console?

[brozada]

Wow, I didn’t knew that ionic-native could only work on real devices. Sorry then for bothering with this question.
I’ll give a try with devices, but will continue with js script in index, as this should work in all situation.
My apologies for your waste of time analizing this.

[wswoodruff]

@aaronksaunders Thanks for replying! Good call, I enabled the Android api but not the iOS api. So since posting yesterday, I’ve upgraded to the newest version of Ionic and now this plugin is fubar loL. It’s trying to reference Cordova plugins in an old way:

When referencing my <div id="GoogleMap"></div> with 
let map = new GoogleMap('GoogleMap'); in my constructor I'm getting:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: ReferenceError: plugin is not defined
ORIGINAL STACKTRACE:
ReferenceError: plugin is not defined
    at new GoogleMap (http://localhost:8100/build/js/app.bundle.js:81819:32)
    at new Map (http://localhost:8100/build/js/app.bundle.js:318:19)
    at DebugAppView._View_Map_Host0.createInternal (Map_Host.template.js:15:19)
....
...

But this is ok, I’ve decided to abandon this effort because I’d like to have Google maps in a browser build for my app anyway. Should work out just fine!

Seems like the plugin needs updating, and I’m not sure if ionic-native’s Google and GoogleMapsEvent imports need updating as well, seems like there are some breaking changes going on in Ionic, which is cool, but means this probably won’t work!

Thanks though guys!

[aaronksaunders]

I posted a functional demo in my github repo: https://github.com/aaronksaunders/ionic2GMapNative

There are some issues but it is working… Need to make sure you are in the latest versions of everything

[ZiFFeL]

Which issues do you have? cc @aaronksaunders

[wswoodruff]

Thanks for putting up that example! =) I’ll have a look-see at it tomorrow

Here’s my Ionic Info

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.8
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
ios-deploy version: 1.8.4
ios-sim version: 3.1.1
OS: Mac OS X El Capitan
Node Version: v4.3.2
Xcode version: Xcode 7.3.1 Build version 7D1014

[Benschuro]

Hello,

I am trying to display the map in my app with the native plugin.

I have done

ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="my_key_was_here" --variable API_KEY_FOR_IOS="my_key_was_here"

like said above but I am still getting a blank page when I am testing on a device.

I have the following error

app.bundle.js:79261 Uncaught TypeError: this._next is not a function
Subscriber.next	@	app.bundle.js:79261
listener	@	googlemaps-cdv-plugin.js:51
self.trigger	@	googlemaps-cdv-plugin.js:42
(anonymous function)	@	googlemaps-cdv-plugin.js:363
ZoneDelegate.invokeTask	@	zone.js:356
Zone.runTask	@	zone.js:256
ZoneTask.invoke	@	zone.js:423

Here is my code :

// map.ts : 
    import {Page, NavController} from 'ionic-angular';
    import {GoogleMap, GoogleMapsEvent} from 'ionic-native'; 
    import {Component} from '@angular/core';

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

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

map.html

    <ion-navbar *navbar>
      <ion-title>Map</ion-title>
    </ion-navbar>
    <ion-content padding class="map-page">
      <div id="map_canvas"></div>
    </ion-content>

map.scss

    .map-page {
    	#map_canvas{
    		height: 100%; 
    		width: 100%
    	}
    }

I don’t understand what this error means.

Here are my ionic infos :

Your system information:

    Cordova CLI: 6.1.1
    Ionic Framework Version: 2.0.0-beta.8
    Ionic CLI Version: 2.0.0-beta.30
    Ionic App Lib Version: 2.0.0-beta.16
    OS:
    Node Version: v5.11.0

Thank you by advance

[aaronksaunders]

This is incorrect…

ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="my_key_was_here" --variable API_KEY_FOR_IOS="my_key_was_here"

Should be…

ionic plugin add https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="my_key_was_here" --variable API_KEY_FOR_IOS="my_key_was_here"

I just posted my complete project on github and i have tested it on ios and android and it renders the map and has the camera go to a specified location. There are some open issues but I have it “functional”

aaronksaunders/ionic2GMapNative

@brozada - you are using the incorrect version of the plugin

[Benschuro]

Thank you @aaronksaunders for your help,

I have done like you said and follow your project on Github but I still can not display the map on my phone.

I have the error app.bundle.js:79261 Uncaught TypeError: this._next is not a function when I am using
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => console.log("Map is ready!"));

However when I am using the one() method, I do not have any erros but the map is not displayed.

Do you the difference between on et one ?

Thanks

[aaronksaunders]

this is a know issue in the ionic-native module… please see notes earlier in the thread.

if you are in fact using one instead of on it should be working properly, please see my project in github for more information, you might be using the wrong version of the plugin

this.map.one(GoogleMapsEvent.MAP_READY).subscribe(() => console.log("Map is ready!"));

[mariolugo23]

This code works for me:

  init() {
    this.platform.ready().then((readySource) => {
      console.log('Platform ready from', readySource);
      // Platform now ready, execute any required native code
      navigator.geolocation.getCurrentPosition((position) => {
        let mapDiv = document.getElementById("map_canvas");
        let latLng = new plugin.google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        let opt = {
          'backgroundColor': 'white',
          'mapType': plugin.google.maps.MapTypeId.ROADMAP,
          'controls': {
            'compass': true,
            'myLocationButton': true,
            'indoorPicker': true,
            'zoom': true
          },
          'gestures': {
            'scroll': true,
            'tilt': true,
            'rotate': true,
            'zoom': true
          },
          'camera': {
            'latLng': latLng,
            'zoom': 15
          }
        }
        this.map = plugin.google.maps.Map.getMap(mapDiv, opt);
        //set clickable
        this.map.setClickable(true);
        // clean the map every time you enter the view
        this.map.clear();
        // You have to wait the MAP_READY event.
        this.map.on(plugin.google.maps.event.MAP_READY, this.onMapInit);
      });
    });

  }
  onMapInit() {
    console.log('map init');
  }