I tested it only by serve command.
Using Google maps js libraries through index.html or following joshmorony tutorial works fine. I think that the issue is only related to ionic-native
Well, there’s a reason for which the package is called ionic-native
it’s for native plugins targeting real devices, i.e. they won’t work in the browser.
did you enable the APIs in your google developer console?
Wow, I didn’t knew that ionic-native could only work on real devices. Sorry then for bothering with this question.
I’ll give a try with devices, but will continue with js script in index, as this should work in all situation.
My apologies for your waste of time analizing this.
@aaronksaunders Thanks for replying! Good call, I enabled the Android api but not the iOS api. So since posting yesterday, I’ve upgraded to the newest version of Ionic and now this plugin is fubar loL. It’s trying to reference Cordova plugins in an old way:
When referencing my <div id="GoogleMap"></div> with
let map = new GoogleMap('GoogleMap'); in my constructor I'm getting:
EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: ReferenceError: plugin is not defined
ORIGINAL STACKTRACE:
ReferenceError: plugin is not defined
at new GoogleMap (http://localhost:8100/build/js/app.bundle.js:81819:32)
at new Map (http://localhost:8100/build/js/app.bundle.js:318:19)
at DebugAppView._View_Map_Host0.createInternal (Map_Host.template.js:15:19)
....
...
But this is ok, I’ve decided to abandon this effort because I’d like to have Google maps in a browser build for my app anyway. Should work out just fine!
Seems like the plugin needs updating, and I’m not sure if ionic-native’s Google
and GoogleMapsEvent
imports need updating as well, seems like there are some breaking changes going on in Ionic, which is cool, but means this probably won’t work!
Thanks though guys!
I posted a functional demo in my github repo: https://github.com/aaronksaunders/ionic2GMapNative
There are some issues but it is working… Need to make sure you are in the latest versions of everything
Thanks for putting up that example! =) I’ll have a look-see at it tomorrow
Here’s my Ionic Info
Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.8
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
ios-deploy version: 1.8.4
ios-sim version: 3.1.1
OS: Mac OS X El Capitan
Node Version: v4.3.2
Xcode version: Xcode 7.3.1 Build version 7D1014
Hello,
I am trying to display the map in my app with the native plugin.
I have done
ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="my_key_was_here" --variable API_KEY_FOR_IOS="my_key_was_here"
like said above but I am still getting a blank page when I am testing on a device.
I have the following error
app.bundle.js:79261 Uncaught TypeError: this._next is not a function
Subscriber.next @ app.bundle.js:79261
listener @ googlemaps-cdv-plugin.js:51
self.trigger @ googlemaps-cdv-plugin.js:42
(anonymous function) @ googlemaps-cdv-plugin.js:363
ZoneDelegate.invokeTask @ zone.js:356
Zone.runTask @ zone.js:256
ZoneTask.invoke @ zone.js:423
Here is my code :
// map.ts :
import {Page, NavController} from 'ionic-angular';
import {GoogleMap, GoogleMapsEvent} from 'ionic-native';
import {Component} from '@angular/core';
@Component({
templateUrl: 'build/pages/map/map.html',
})
export class MapPage {
constructor(public nav: NavController) {
}
ionViewLoaded() {
let map = new GoogleMap('map_canvas');
map.on(GoogleMapsEvent.MAP_READY).subscribe(() => console.log("Map is ready!"));
}
}
map.html
<ion-navbar *navbar>
<ion-title>Map</ion-title>
</ion-navbar>
<ion-content padding class="map-page">
<div id="map_canvas"></div>
</ion-content>
map.scss
.map-page {
#map_canvas{
height: 100%;
width: 100%
}
}
I don’t understand what this error means.
Here are my ionic infos :
Your system information:
Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.8
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
OS:
Node Version: v5.11.0
Thank you by advance
This is incorrect…
ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="my_key_was_here" --variable API_KEY_FOR_IOS="my_key_was_here"
Should be…
ionic plugin add https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="my_key_was_here" --variable API_KEY_FOR_IOS="my_key_was_here"
I just posted my complete project on github and i have tested it on ios and android and it renders the map and has the camera go to a specified location. There are some open issues but I have it “functional”
@brozada - you are using the incorrect version of the plugin
Thank you @aaronksaunders for your help,
I have done like you said and follow your project on Github but I still can not display the map on my phone.
I have the error app.bundle.js:79261 Uncaught TypeError: this._next is not a function
when I am using
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => console.log("Map is ready!"));
However when I am using the one() method, I do not have any erros but the map is not displayed.
Do you the difference between on
et one
?
Thanks
this is a know issue in the ionic-native module… please see notes earlier in the thread.
if you are in fact using one
instead of on
it should be working properly, please see my project in github for more information, you might be using the wrong version of the plugin
this.map.one(GoogleMapsEvent.MAP_READY).subscribe(() => console.log("Map is ready!"));
This code works for me:
init() {
this.platform.ready().then((readySource) => {
console.log('Platform ready from', readySource);
// Platform now ready, execute any required native code
navigator.geolocation.getCurrentPosition((position) => {
let mapDiv = document.getElementById("map_canvas");
let latLng = new plugin.google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let opt = {
'backgroundColor': 'white',
'mapType': plugin.google.maps.MapTypeId.ROADMAP,
'controls': {
'compass': true,
'myLocationButton': true,
'indoorPicker': true,
'zoom': true
},
'gestures': {
'scroll': true,
'tilt': true,
'rotate': true,
'zoom': true
},
'camera': {
'latLng': latLng,
'zoom': 15
}
}
this.map = plugin.google.maps.Map.getMap(mapDiv, opt);
//set clickable
this.map.setClickable(true);
// clean the map every time you enter the view
this.map.clear();
// You have to wait the MAP_READY event.
this.map.on(plugin.google.maps.event.MAP_READY, this.onMapInit);
});
});
}
onMapInit() {
console.log('map init');
}
Not a problem at all, the forum is a place for learning and knowledge exchange. I would also recommend you to use the Maps web API (instead of the native) in the beginning because IMHO it’s easier for prototyping/testing. You could try to integrate the native API at a later point, after you have a better idea about the app design/implementation and more experience with Ionic.
Tried @aaronksaunders repository an all working. Many thanks to @aaronksaunders and @iignatov for your great help!
Other mistakes I had and solved with the repo were:
- I hadn’t installed from SDK the Google Repository and services packages.
- I was using JS key for devices.
- I didn’t execute
cordova prepare
. - The plugin wasn’t installed from phonegap googlemaps github but like in ionic-native docs.
Thanks!
Hi morning, I need help, iI’m following your repo, but don’t work just showing is screen logo google left bottom
Add code in ionViewDidEnter - then DOM has fully loaded. I think error is coming because DOM is not loaded.