Google maps from ionic-native

did you enable the APIs in your google developer console?

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.

1 Like

@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!

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

Which issues do you have? cc @aaronksaunders

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

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 :slight_smile:

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”

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

1 Like

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

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!"));

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');
  }

Not a problem at all, the forum is a place for learning and knowledge exchange. :slight_smile: I would also recommend you to use the Maps web API (instead of the native) in the beginning because IMHO it’s easier for prototyping/testing. You could try to integrate the native API at a later point, after you have a better idea about the app design/implementation and more experience with Ionic.

1 Like

I’m having the same problem that @brozada and I’m trying on my Android Phone.
What can I do?

I’m not sure - you could check the following repository for possible causes or solutions.

Tried @aaronksaunders repository an all working. Many thanks to @aaronksaunders and @iignatov for your great help!

Other mistakes I had and solved with the repo were:

  • I hadn’t installed from SDK the Google Repository and services packages.
  • I was using JS key for devices.
  • I didn’t execute cordova prepare.
  • The plugin wasn’t installed from phonegap googlemaps github but like in ionic-native docs.

Thanks!

1 Like

Hi morning, I need help, iI’m following your repo, but don’t work just showing is screen logo google left bottom

did you follow all of the steps listed by @brozada?

Add code in ionViewDidEnter - then DOM has fully loaded. I think error is coming because DOM is not loaded.

in @aaronksaunders example app, I needed to apply the following css (by inspecting it with safari via running it in the simulator / on a device) so there is no black screen:

ion-nav.has-views {
    background-color: transparent !important;
}
1 Like

Where did you put this code?

Before, I’ve added the following one:
ion-app.gmaps_cdv .nav-decor{
background-color: transparent !important;
}

this snippet doesn’t work anymore for me.