Ionic 3.20 and googlemaps plugin

Question

(sorry for my bad English) I have an app @ ionic / cli-utils: 1.19.2, ionic (Ionic CLI): 3.20.0, and I tried to work with GoogleMaps native through the respective plugin. I could not do it and always get the same error. Thank you if you can help me. I am about to leave Ionic for its maps plugin. Thank you very much!

ERROR TypeError: Cannot read property 'constructor' of undefined.

I installed the plug-in (version 2.6.2 installed) with:

ionic cordova plugin add cordova-plugin-googlemaps

npm install --save @ionic-native/google-maps

As of 2.6.0. the keys go in the config.xml and not in the add plugin. it is right ?

in config.xml:

<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="xxx" />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="yyy" />

and... 

<plugin name="cordova-plugin-googlemaps" spec="^2.6.2">
<variable name="PLAY_SERVICES_VERSION" value="15.0.1" />
<variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" />
</plugin>

I send the code and also the ionic info:

map.html:

<ion-content>
<div id="map_canvas"></div>
</ion-content>

map.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, Platform, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng } from '@ionic-native/google-maps';

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})
export class MapPage {
  map: GoogleMap;
  public lat_mapa;
  public lng_mapa;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public geolocation: Geolocation,
    public googleMaps: GoogleMaps,
    private platform: Platform
  ) {  }

  ionViewDidLoad() {
    this.platform.ready().then(() => {
      // 2 DIFFERENT CREATE MODELS, WHICH I FOUND ON THE INTERNET (use one or the other)
      this.map = GoogleMaps.create('map_canvas');  ON THIS LINE MAKES THE ERROR
      this.map = this.googleMaps.create('map_canvas');  ON THIS LINE IT ALSO MAKES THE SAME ERROR
      this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
        let myPosition: LatLng = new LatLng(41.390295, 2.154007);
        this.map.animateCamera({ target: myPosition, zoom: 10 });
      })
    })
    this.loadMap();
  }

loadMap() {
    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        // Now you can use all methods safely.
        this.getPosition(); // not included because it is not necessary 
      })
      .catch(error => {
        console.log(error);
      });
  }

Ionic info:
@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.2.3
 Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
    Node              : v8.11.3
    npm               : 5.6.0
    OS                : Windows 8.1

adit bharadwaj adit bharadwaj · Accepted Answer · 2019-11-19T06:57:34

it is normally the problem of plugin version mismatch that's why that error appears: u can try this version as this one still has support ionic 3

npm install @ionic-native/[email protected]

Hope it solves the issue

Ionic 3.20 and googlemaps plugin

1 Answers