Cordova: google maps v3 not showing on iOS - javascript

I am building a cordova app and i am stuck with a problem since three days.. I tried every thing i found on Stack or Google. My point is I can show a google map on android but not on iOS. There is just a grey div. On debug, when clicking on this div, I get this error : TypeError: undefined is not an object (evaluating 'a.x')
Another thing : I have a Gif loader that stay over the grey div, and it should go under the map div.
I am using gmap v3 with or without API key : same issue.
I copy my config.xml :
<?xml version='1.0' encoding='utf-8'?>
<widget id="co.brandyapp.applitest8" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>applitest8</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*.google.com" />
<access origin="*.gstatic.com" />
<access origin="*.googleapis.com" />
<access origin="*.brandyapp.co" />
<allow-navigation href="http://*.google.com" />
<allow-navigation href="http://*.googleapis.com/*" />
<allow-navigation href="http://*.gstatic.com/*" />
<allow-navigation href="http://*.brandyapp.co/*" />
<plugin name="cordova-plugin-whitelist" version="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
The strange thing is I get the same issue with this tuto : http://www.christianengvall.se/phonegap-and-google-maps/
Thank you for your help ! This issue is driving me crazy ! :)

Related

Cordova Using allow-navigation impacts allow-intent on iOS

In my app I have some links with the tag <a href=""> and also with javascript with the code below.
let url = param;
window.open(url, '_system');
My config.xml is configured as below, and opening links works perfectly, when clicking on a link or executing the window.open function, it opens Safari and the URL together.
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
However, as I need to display some videos from YouTube and Vimeo (iframe), I needed to add the allow-navigation tag, but when I do that, the allow-intent setting is ignored and all links start opening inside the app.
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="https://*youtube.com/*"/>
<allow-navigation href="https://*vimeo.com/*" />
I use https://*/* because the user can make infinite URLs available and so it would be interesting for him to be able to open any one.
I don't know if this is a bug or my fault.
If I used only allow-navigation I would have to have some workaround in the code to detect each link that comes in dynamic texts created by users and assign an onClick event to use the inAppBrowser and force it to use the _system.
But this kind of code I don't know how to do.
Cordova: 11.1.0
Cordova iOS: 6.2.0

Problems with Angular and Cordova

I'm new to cordova, i have an angular application with jwtModule for the authentication whit token.
When I compile the application and insert it in the 'www' folder of cordova everything goes well, even the emulation of the app on an android device, but when I try to authenticate myself the application does not send the data to the back-end.
I think it's a problem related to whiteListDomain! but if I try to emulate the application with a browser platform everything goes well
this is the index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drive</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type=”text/javascript” src=”cordova.js”></script>
</head>
<body class="bg-light text-dark">
<app-root></app-root>
</body>
</html>
this is the configuration of app.module.ts
JwtModule.forRoot({
config: {
tokenGetter: tokenGetter,
whitelistedDomains:'http://localhost:7850','http://192.168.1.190:7850']
}
})
This is the config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.mobile.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MobileApp</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>

Phonegap inappbrowser do not load, shows blank page

This is phonegap main file www/index.html I want to load my site like a native app, the script:
//var ref = cordova.InAppBrowser.open('http://website.com/page/index.php', '_self', 'location=no');
document.addEventListener("deviceready", function(){
window.open = cordova.InAppBrowser.open('http://website.com/page/index.php', '_self', 'location=no');
},true);
</script>
my phonegap config.xml file
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
also my website has enable in all pages
header('Access-Control-Allow-Origin: *');
the website in the script is not my website at all because I am running it on localhost, I tested the website in same network with phone browser and it works just fine, but when I try to load via phone gap app it shows blank page
your code is changing the prototype default for windows.open(), not actually opening anything;
what you need is:
window.open = cordova.InAppBrowser.open;//change default prototype to cordova
var ref = cordova.InAppBrowser.open(url, target, options);//inappbrwoser reference
then you can do ref.close(),show(),hide() etc.
you can also addEventListener

Include external javascript code in cordova app

I tried to include external javascript code in my cordova app but it doesn't work.
My code as following:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://website.com/api/scripts.js"></script>
My whitelist script as following:
<allow-navigation href="*" />
<allow-intent href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
it's better to load the jQuery script from the app library instead external (unlike in web), makes the loading faster.
regarding the script add,
<access origin="https://*.website.com/api/scripts.js" launch-external="yes"/> check if it fixes the build.

AJAX failing in Android using Cordova

I have been trying hard to make AJAX calls to my node.js server with no success.
I have done the following:
1) Installed the cors package in my node.js server. AJAX did work in the browser.
2) Added the following Content Security Policy to index.html:
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://maps.googleapis.com https://163.172.175.135">
3) Added a few lines to my config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="roda.X.XXXX" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Roda</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="android" spec="^6.2.3" />
<engine name="browser" spec="^4.1.0" />
<plugin name="cordova-plugin-geolocation" spec="^2.4.3" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
</widget>
What have I missed?
I later found out that AJAX would work in debug mode, but not in release mode. The problem was that I was using the IP address instead of the domain name to connect to the server, thus failing SSL verification. In debug mode, SSL certificates are not verified.
Phew. Problem solved!

Categories

Resources