Ionic 2 - Google Maps working in browser, but not device - google-maps

I have the following implementation of Google Maps api (see link below). It works perfectly when I run ionic serve and test it in a browser. However, when I do cordova build and deploy the apk to my android 6.0.1 phone, it fails. The map does not load and it hangs on the loading spinner.
If anyone has any ideas, I would appreciate the help.
Thanks
https://forum.ionicframework.com/t/google-maps-working-in-browser-but-not-device/58819

SOLVED:
I ran the following, and low the map loads on the device too:
cordova plugin add cordova-plugin-geolocation

Run the following commands:
ionic plugin add cordova-plugin-geolocation
and
npm install --save #ionic-native/geolocation`
This link would be helpful.

Related

How to fix 'Google services version conflict (Maps / FCM)'

the problem happens after add google map plugin in this link
https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4
this google map work fine in ios but when I try to run it on android
get this error
[cordova] * What went wrong:
[cordova] Execution failed for task
':app:processDebugGoogleServices'.
[cordova] > Please fix the version conflict either by updating the
version of the google-services plugin (information about the latest
version is available at https://bintray.com/android/android-
tools/com.google.gms.google-services/) or updating the version of
com.google.android.gms to 10.+.
[cordova]
[cordova] * Try:
[cordova] Run with --stacktrace option to get the stack trace. Run
with --info or --debug option to get more log output. Run with --
scan to get full insights.
[cordova]
[cordova] * Get more help at https://help.gradle.org
[cordova]
[cordova] BUILD FAILED in 38s
[ERROR] An error occurred while running subprocess cordova.
cordova build android exited with exit code 1.
I try all these solutions but not work for me but work for someone
1- https://forum.ionicframework.com/t/ionic-processdebuggoogleservices-version-conflict/132560
2- https://github.com/arnesson/cordova-plugin-firebase/issues/1093
3- https://forum.ionicframework.com/t/execution-failed-for-task-app-processdebuggoogleservices-please-fix-the-version-conflict-either-by-updating-the-version-of-the-google-services-plugin-version-of-com-google-android-gms-to-11-8-0/125610
4- https://forum.ionicframework.com/t/google-services-version-conflict-maps-fcm/93695/51
5- https://forum.ionicframework.com/t/google-services-version-conflict-maps-fcm/93695
The problem happens because I am using the old version from FCM plugin it works fine before adding google map plugin the conflict happens because of the 10.+ and 15.0.1 not the same and not compatible.
cordova.system.library.2=com.google.firebase:firebase-core:10.+
cordova.system.library.3=com.google.firebase:firebase-messaging:10.+.
and
cordova.system.library.4=com.google.android.gms:play-services-maps:15.0.1
cordova.system.library.5=com.google.android.gms:play-services-location:15.0.1
the solution is very simple and funny for me on these steps
1- uninstall fcm plugin using this command.
ionic cordova plugin rm cordova-plugin-fcm-with-dependecy-updated
2- install fcm plugin
ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated
3- remove the android platform
ionic cordova platform rm android
4- add android platform
ionic cordova platform add android
now everything is ok
go to android platform and open project.properties
you found the changes
like that
cordova.system.library.2=com.google.firebase:firebase-core:16.0.9
cordova.system.library.3=com.google.firebase:firebase-messaging:18.0.0
now run
ionic cordova run android
I hope that helpfull anyone thanks.

Is it possible to integrate an external website into ionic app?

I want to create a Ionic app which only shows a external website.
How can I do this?
Thanks for help.
I feel you can use cordova plugin to opening a link with your app, Also you can use the custom-url-scheme (cordova-plugin) So you can open external link on your app as on this way testapp://path?foo=bar.
Refer to this : Here the Link
================================================================================
So install InAppBrowser:
ionic cordova plugin add cordova-plugin-inappbrowser
npm install --save #ionic-native/in-app-browser
you can call as like:
window.open(url, '_system');
As described here : Refer the Link and also document

ionic cordova plugin add ERROR

When run this command:
ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="google-api-key" --variable API_KEY_FOR_IOS="google-api-key"
The ERROR occurs:
Installing "cordova-plugin-googlemaps" for android
Failed to install 'cordova-plugin-googlemaps': Error: ENOENT: no such
file or directory, open
'/Users/xxx/Desktop/xxx/platforms/android/AndroidManifest.xml'
i have sometimes the same problem, have open sublime or something like notepad?
if you have opened some notepad, check if exists the android directory and click inside of him(sometimes dont remove this directory with the notepad opened)
if dont exists the directory, the problem is easy you dont have the directory. You must to do these commands inside ionic proyect.
For ionic:
ionic platflorm remove android
ionic platform add android
For cordova cli:
ionic cordova platflorm remove android
ionic cordova platform add android
For check ionic version inside proyect:
ionic info
Greetings dherediat
As per Cordova Android CLI version 7.0.0 release note you need to change your AndroidManifest.xml path as mention below
This may affect plugin.xml files and config.xml files that use
edit-config, and make it so plugins that use edit-config will not be
able to be compatible with both Android 6.x and Android 7.x. To fix
this issue, please do the following in your XML files:
<!-- An existing config.xml -->
<edit-config file="AndroidManifest.xml" target="/manifest/application" mode="merge">
<!-- needs to change to -->
<edit-config file="app/src/main/AndroidManifest.xml" target="/manifest/application" mode="merge">
Check this official release note for Cordova Android CLI 7.0.0 Release Note.
Hope this will helps to solve your problem

Cordova build error :transformclasseswithdexfordebug

When I try build app I get this error what I do?
I tried re-install node.js and cordova but it didn't work.
Why not use Ionic to build your app via Cloud.
First, run
ionic io init
Create account on Ionic website, put in the details on command live as asked.
Run the below command.
ionic package build android
No need to install anything, files will be built online.

Cordova 3 + Ripple

Someone knows if Ripple works with latest cordova version? Cause I'm trying and I can't even start control panel. And when I try without it, pops some "alerts":
gap:["PluginManager","startup","PluginManager590841628"]
gap:["App","show","App590841629"]
Versions:
Cordova 3
Ripple 0.9.16
Chrome 28.0.1500.95 m
The ripple emulator has been broken for a long time, since cordova version 2.7 to version 3.1 (more or less: cordova version is not tied to ripple version). You can find it here: http://ripple.incubator.apache.org/
These articles are excellent to get you up to speed with the latest version of ripple:
http://www.raymondcamden.com/index.cfm/2013/11/5/Ripple-is-Reborn
http://www.raymondcamden.com/index.cfm/2013/11/7/Using-Grunt-to-automatically-build-your-PhoneGapCordova-projects
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/
Hope this helps.
Found the answer!
You just need to remove the Ripple Extension from your Google Chrome.
But after that I had another problem: For Cordova 3.3.0, you might face this weird error while emulating the camera or the photo/media library:
Uncaught TypeError: Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present. -- ripple.js:49275
/incubator-ripple-master_new/pkg/hosted/ripple.js - line 49279
change this:
capture.setAttribute("controls");
to this:
capture.setAttribute("controls", true);
and then you can restart Ripple. BTW, for version 0.9.20, you don't need to provide the path to 'platforms/android/assets/www' anymore, just provide the root path and it will identify your project:
./ripple emulate --port 1234 --path ~/tech/phonegap/myPhonegapApp/
Ripple project was given to Apache. You can find here.
There, we can find the GitHub repository that we can build newests versions.
This is how I got ripple to work using Phonegap 3.0.0 and Chrome 33.0.1750:
npm install -g ripple-emulator
phonegap local build android
cp platforms/android/assets/www/phonegap.js www/phonegap.js
ripple emulate
The reason for the copy of phonegap.js is that ripple issues a cordova prepare which rebuilds all files in .../assets/www and removes phonegap.js. Note that this happens everytime you refresh the emulator.
I have created a patch for this. Once this is installed change the URL in the emulator to include &phonegap=true, e.g.
http://localhost:4400/?enableripple=cordova-3.0.0-WVGA&phonegap=1
In case it helps others, I found that when running the command
$ cordova ripple ios 8080
i.e. not running Ripple directly, everything seemed to 'just work' for my albeit simple app in development.
I have v3 installed from NPM.
I'm using PhoneGap 2.9 with Ripple and though the alerts are annoying, the emulator seems to work fine. If you want to kill off the alerts, the line that send them (which appears to be only for debugging) is 4277 in cordova.js:
return prompt(argsJson, 'gap:'+JSON.stringify([service, action, callbackId]));
Commenting that line out seems to harmlessly remove the alerts.
I have been ignoring these alerts in ripple. Clicking cancel or hitting escape key.
After canceling the alerts Ripple worked well enough for development. (maybe not all features will be working)
I used phonegap 2.7.0.
You can get similar alerts when accidentaly using incorrect cordova.js which is platform dependent (e.g. use cordova.js for android on IOS device)
You can use this code in your head tag :
<script>window._cordovaNative = true;</script>
I went into hello/platforms/ios/CordovaLib and copied the cordova.js file into my www root
and changed in my index file
<script type="text/javascript" src="phonegap.js"></script>
to
<script type="text/javascript" src="cordova.js"></script>
and no more popups