Ionic Google Maps is not working getting error - GoogleMaps [deprecated] Please use GoogleMaps.create()


#1

Just copied example code given in ionic native https://ionicframework.com/docs/native/google-maps/.

Ionic info -

@ionic/cli-utils : 1.18.0
ionic (Ionic CLI) : 3.18.0

global packages:
cordova (Cordova CLI) : 7.1.0

local packages:
@ionic/app-scripts : 3.1.0
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.9.2

System:
Android SDK Tools : 26.1.1
Node : v6.10.2
npm : 3.10.10
OS : Windows 10

Environment Variables:
ANDROID_HOME : C:\Android\sdk

Misc:
backend : pro


#2

Yes, The Same error happen to me also … someone helps me to solve this issue.


#3

Use earlier version of @ionic-native/google-maps from npm it helped me to solve this problem.


#4

Actually, @ionic-native/google-maps@2.1.0 is not working. Kindly tell me the version.


#5

This one was bugging me too because I was in your same boat. I copied/pasted the code from the api and was still getting the message. Turns out create() is now a static function on the class instead of the object. All this means is you have to access it off of the class GoogleMaps (uppercase) instead of the object googleMaps (lowercase).

The code below should work:
this.map = GoogleMaps.create('canvas', mapOptions);


#6

@daytonh Can you make a working fiddle or post the source file here


#7

@ionic-native/google-maps@2.1.0

That’s too old version. The current latest version is v4.4.0.

So try like this:

$> npm uninstall @ionic-native/core @ionic-native/google-maps

$> cordova plugin rm cordova-plugin-googlemaps

$> cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="...." --variable API_KEY_FOR_IOS="..."

$> npm install @ionic-naive/core@latest  @ionic-naive/google-maps@latest 

#8

Tried this it is not working. I too get GoogleMaps [deprecated] Please use GoogleMaps.create(). Please Help


#9

And this.map = GoogleMaps.create('canvas', mapOptions);


#10

This seems to work. Now there’s another issue. Cannot see the map. Error: exec proxy not found for :: CordovaGoogleMaps :: putHtmlElements in the console


#11

Hello, can you send me a working Google Map ?


#12

You are probably trying to run the map on browser. The map plugin runs on Android and iOS only


#13

Yes I tried that all this time. No luck. Now I added JavaScript API with the tags in the index.html. This works in the browser but not in the Device. Can you help please? It is because of the API Credentials?


#14

Hi Guys, As @daytonh suggested i changed my TS code as below and it worked for me.

HTML

<ion-header>
  <ion-navbar>
    <ion-title>
      Location
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content  class="home">
  <div style="height: 100%;" id="map_canvas"></div> 
</ion-content>

TS

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker
 } from '@ionic-native/google-maps';

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {
  map:GoogleMap;
  lat:any; lang:any;
  constructor(private geolocation: Geolocation, public navCtrl: NavController) {
    this.loadGoogleMap();
    
  }  
  loadGoogleMap(){
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };
    this.map = GoogleMaps.create('map_canvas', mapOptions);    
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        this.map.addMarker({
            title: 'Ionic',
            icon: 'blue',
            animation: 'DROP',
            position: {
              lat: 43.0741904,
              lng: -89.3809802
            }
          })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {
                  
              });
          });

      });
  }

}

Here is the screen

I hope you were looking for the same, make sure you test in real device.


#16

Is it normal to delay?

$> cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="...." --variable API_KEY_FOR_IOS="..."


#17

Installing the plugin from the multiple_maps is for the person who faces some problems when you use the npm version.
I develop almost every day, so updating the code is high frequency.

Install the plugin from the multiple_maps is sometimes slow. It is depends on your country, because github is hosted on USA typically.
And your git command version is also related.


#20

I get this error

this is my code

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

@IonicPage()
@Component({
  selector: 'page-homeTurista',
  templateUrl: 'homeTurista.html',
  providers: [GoogleMaps , Geolocation ]

})
export class HomeTuristaPage {
  map:GoogleMap;
  lat:any; lang:any;
  constructor(private geolocation: Geolocation, public navCtrl: NavController) {
    this.loadGoogleMap();
    
  } 
  //ionViewDidLoad() {
    //this.loadGoogleMap();
  //}
  loadGoogleMap(){
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };
    this.map = GoogleMaps.create('map', mapOptions);    
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        this.map.addMarker({
            title: 'Ionic',
            icon: 'blue',
            animation: 'DROP',
            position: {
              lat: 43.0741904,
              lng: -89.3809802
            }
          })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {
                  
              });
          });

      });
  }

}



#21

#22

I’ve followed your instructions but nothing happened.

Really I’ve checked the api key, but still nothing.

The map is empty but I can see the Google Logo…


#23

You can see the Google Logo means your api key is not matched with registered information at the Google Developers console