Google Maps - HOW TO


Can someone please explain this docs in more detail because it’s not working.

This is my modal component which should display the map:

import {Component} from '@angular/core';
import {Modal, ViewController, NavParams} from 'ionic-angular';
import {GoogleMap, GoogleMapsEvent} from 'ionic-native';

  template: `<ion-content padding>
               <button (click)="close()">Close</button>
               <div id="map"></div>
  providers: [GoogleMap, GoogleMapsEvent]
export class MapModal {
  constructor(viewCtrl: ViewController, navParams: NavParams) {
    this.viewCtrl = viewCtrl;
    this.coordonates = navParams.get('coordonates');
  ionViewLoaded() {
    var map = new GoogleMap('map');
    map.on(GoogleMapsEvent.MAP_READY).subscribe(() => { console.log("Map is ready!") });
  close() {

here is the error in the console:

browser_adapter.js:77 ORIGINAL EXCEPTION: Can’t resolve all parameters for GoogleMap: (?).

Is this normal?

Btw I followed the link from the Ionic 2 documentation :

1 Like

You’re trying to add these methods as providers. You don’t need to do this.
Remove that and run on a device, you should be good.

I try googlemap plugin too

and i get this

06-29 17:53:57.031: I/chromium(15345): [INFO:CONSOLE(85114)] "Uncaught TypeError: this._next is not a function", source: file:///android_asset/www/build/js/app.bundle.js (85114)

when try to use

map.on(GoogleMapsEvent.MAP_READY).subscribe(() => { console.log("Map is ready!") });

what should i do ?

Thank you for your reply.

Here is a bigger problem since today when I do ionic build android in CLI

add to body class: platform-android

Discovered plugin "cordova-plugin-googlemaps" in config.xml. Adding it to the project

Found is already fetched. Skipped fetching cordova-plugin-googlemaps

Plugin "" already installed on android.


JAVA_HOME=C:\Program Files\Java\jdk1.8.0_91

FAILURE: Build failed with an exception.

* What went wrong:

A problem occurred configuring root project 'android'.

Could not resolve all dependencies for configuration ':_debugCompile'.

Could not find any version that matches

     Searched in the following locations:

     Required by:


   > Could not find any version that matches

     Searched in the following locations:

     Required by:


* Try:

Run with
--stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.


Total time: 2.839 secs

Error: Error code 1 for command: cmd with args: /s,/c,"E:\datz_new\DatzApp\DatzMagazine\platforms\android\gradlew cdvBuildDebug -b E:\datz_new\DatzApp\DatzMagazine\platforms\android\build.gradle -Dorg.gradle.daemon=true -Pandroid.useDeprecatedNdk=true"

Caught exception:

Here is how my Android SDK Manager looks like:

And yes as the pasted log above, after alot of frustration I tried to insert manually the <plugin name="cordova-plugin-googlemaps" spec="~1.3.9"/>
tag in the config.xml file, but with no use and no clue how to debug this/fix it.

If you’re able to reply I will appreciate it very much.

Thank you.

EDIT: Bug fixed after ionic beta 10. No more crash on building for android platform. @mhartington , still after I corrected my code like you mentioned, how do I proceed in order to display a map centered in a specific LatLng coordonate? Thanks again.

So there is actually a bug: View on Git

There is a functional example here that accounts for the known issue logged in github, this project has been tested and validated by a few people, please clone the project and substitute you keys and see if it works for you.

Did you find a resolution for this error?

I use code from @aaronksaunders example

it work for me

Ok thanks.

Yes using the .one() method works but certain use cases can only be achieved using the .on() method. So I guess I need to wait until this gets properly resolved.