Ionic Native / Ionic 2 - Google Maps (cordova-plugin-googlemaps)

Ionic Native
1

Hello.
I am trying to make a map view using the cordova-plugin-googlemaps plugin.
I managed to init the map into my div, but it has a gray background and basically I don’t see any actual map there, just the logo of google at the bottom left.

Also I don’t quite understand how to perform manipulations to the map object. The documentation is very poor (and it’s okay as we’re still in Beta). I would love to have some assistance.


https://github.com/driftyco/ionic-native/blob/master/src/plugins/googlemaps.ts

My code: (home.ts)

import {Page, Platform} from 'ionic-angular';
import {GoogleMaps} from 'ionic-native';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  map;
  
  platform;
  
  constructor(platform: Platform) {
    this.platform = platform;
    this.init();    
  }
 
 init() {
   this.platform.ready().then(() => {
    console.log('init called');
    this.map = new GoogleMaps('map_canvas');
     
   })
 }
  
}

And basically the mentioned above happens. How can I get to the point of manipulating the map (and actually seeing a map)? Stuff like setCenter, setZoom etc.

Much thanks in advance!

2

Hi,
I didn’t even realise ionic-native had Google Maps. I’ve used this plugin directly rather than using the Ionic-Native binding (I don’t know if this binding works yet?). The main point is that you need to specify your Google Maps SDK API Key when you add the plugin as per the instructions at:

If you don’t set the API key properly you’ll get an error logged to the console (android debug console etc) saying that authorisation failed and you’ll get a blank map.

The API they describe there is the one you need to use as it is not an exact replica of the official Google Maps API.

You can see some working application code in my app (it’s very specific to my app but might be of some use): https://github.com/openchargemap/ocm-labs/blob/master/App/Ionic2/ocm-app/app/core/ocm/mapping/providers/GoogleMapsNative.ts

3

I’m having this exact same issue, and I can’t resolve it. Does anyone have a solution?

4

your app link is not working

5

Thanks, the app file structure changed with the migration to ionic 2 rc 1. The root of the repo is https://github.com/openchargemap/ocm-labs