Google Maps - HOW TO

Ionic Framework ionic-v3
1

Hello,

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

@Component({
  template: `<ion-content padding>
               <button (click)="close()">Close</button>
               <div id="map"></div>
             </ion-content>`,
  providers: [GoogleMap, GoogleMapsEvent]
})
export class MapModal {
  viewCtrl;
  coordonates;
  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() {
    this.viewCtrl.dismiss();
  }
}

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 : GitHub - mapsplugin/cordova-plugin-googlemaps: Google Maps plugin for Cordova

1 Like
2

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.

3

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 ?

4

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 plugin.google.maps is already fetched. Skipped fetching cordova-plugin-googlemaps

Plugin "plugin.google.maps" already installed on android.


ANDROID_HOME=E:\kit\adt-bundle-windows-x86_64-20140702\sdk

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 com.google.android.gms:play-services-maps:+.

     Searched in the following locations:

         https://repo1.maven.org/maven2/com/google/android/gms/play-services-maps/maven-metadata.xml

         https://repo1.maven.org/maven2/com/google/android/gms/play-services-maps/

     Required by:

         :android:unspecified

   > Could not find any version that matches com.google.android.gms:play-services-location:+.

     Searched in the following locations:

         https://repo1.maven.org/maven2/com/google/android/gms/play-services-location/maven-metadata.xml

         https://repo1.maven.org/maven2/com/google/android/gms/play-services-location/

     Required by:

         :android:unspecified



* Try:

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



BUILD FAILED




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

Here is how my Android SDK Manager looks like:

image
sdk2.PNG976×624 36.1 KB

image
sdk1.PNG969×573 34.1 KB

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.

5

So there is actually a bug: View on Git

6

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.

8

Did you find a resolution for this error?

9

I use code from @aaronksaunders example

it work for me

10

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.