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
Yes, The Same error happen to me also … someone helps me to solve this issue.
Use earlier version of @ionic-native /google-maps from npm it helped me to solve this problem.
Actually, @ionic-native /google-maps@2.1.0 is not working. Kindly tell me the version.
daytonh
November 13, 2017, 8:56pm
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);
1 Like
@daytonh Can you make a working fiddle or post the source file here
@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
Tried this it is not working. I too get GoogleMaps [deprecated] Please use GoogleMaps.create(). Please Help
And this.map = GoogleMaps.create('canvas', mapOptions);
1 Like
This seems to work. Now there’s another issue. Cannot see the map. Error: exec proxy not found for :: CordovaGoogleMaps :: putHtmlElements in the console
Hello, can you send me a working Google Map ?
You are probably trying to run the map on browser. The map plugin runs on Android and iOS only
2 Likes
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?
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.
2 Likes
IngIku
November 17, 2017, 11:21pm
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="..."
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.
IngIku
November 18, 2017, 2:01am
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(() => {
});
});
});
}
}
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…
You can see the Google Logo means your api key is not matched with registered information at the Google Developers console