Problems to set up GoogleMaps Native API

Ionic Framework ionic-v3
1

Hello everyone,

I’m to use the Google Maps Native API with ionic 2 but I got some errors at the initialization of the objet.

I installed the Cordova Plugin with my API KEY, I enabled the Google Maps Android API on the Google Developper console. I just import all the objects like this :

import {Geolocation, GoogleMap, GoogleMapsEvent, GoogleMapsLatLng} from 'ionic-native';

Than I retrieve the HTML object with this :

@ViewChild('map') mapElement;

This HTML object looks like this:

<div id="map" style="width:100%; height:100%;"></div>

And I’m initializing the object like this:

this.map = new GoogleMap(this.mapElement);

Everything looks fine but when I’m testing the application with Ionic View, it says:

TypeError: Cannot read property 'maps' of undefined

But I really don’t know where it comes from, that’s why I’m here.

Thank you in advance for your advices and have a nice day.

2

It seems that the plugin is not correctly installed.

I use this command line:

ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="mykey"

And is says:

In order to run this plugin, you need to obtain Google Maps API key for Android.
Visit https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Installation

Check our release notes.
https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Release-Notes

But my API key is a correct Google API Key, and I don’t knwo why is says this. Also, I found that in the config.xml and in the pacakge.json, the plugin is not mentioned, but I have the folder plugin.google.maps in the plugins directory, so I think that the sources of the plugin are installed but not correctly set in the different files, and I don’t know how to fix this :confused:

3

I know its too late to reply but this will help some one who is facing same issues. Once you create the API key by providing your package name and SHA1 in google developer console. You have to enable access to Google Maps Android API. You can enable it by following.

  1. Login to your google developer console.
  2. Click on the Dashboard left menu.
  3. You will see enable API at the top of the page, click on it.
  4. In the Google Map section click on Google Maps Android API.
  5. At the top of the page click on Enable button.

Try after some time, you will be able to access Maps in your Ionic app now.