0

with the previous Phonegap version, I used to open google maps from the app simply opening with an href an url, like this https://www.google.com/maps/dir/?api=1&origin=43.9815648,7.5328161&destination=41.802425,12.6021389

But I noticed, with Phonegap 7, that when I tap on the href element, nothing happens. Why?

How can I fix this and open google maps with a given itinerary?

Piero Alberto
  • 3,823
  • 6
  • 56
  • 108

3 Answers3

1

You can't redirect your Cordova/PhoneGap view to a page hosted somewhere else (as opposed on your phone) for security reasons, so you have two options:

  1. Use a Cordova/PhoneGap plugin for Google maps such as: https://www.npmjs.com/package/cordova-plugin-googlemaps

  2. Use the Cordova/PhoneGap in-app browser plugin to launch your map in a full-screen browser window within your app: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/

Option #1 would be the preferred option.

Neil Cresswell
  • 1,145
  • 8
  • 20
  • My solution used to work with older phonegap, so, I think, this is a new feature of the last one version. With the option #1, can I open an itinerary? – Piero Alberto Oct 18 '17 at 12:50
  • I see you have data= and the documentation for #1 says that google.maps.Data is not available. In this case you may be better off trying option #2 and keep your URL as is. – Neil Cresswell Oct 18 '17 at 13:02
1

If you want to launch the Google Maps app (as opposed to embed Google Maps in your app i.e. cordova-plugin-googlemaps), you can use the phonegap-launch-navigator plugin.

DaveAlden
  • 30,083
  • 11
  • 93
  • 155
1

The pages you can load, scripts you can load, etc, are now controlled by CSP (Content Security Policy), rather than just the old WhiteList mechanism in the config.xml. So, if you want to access pages you have to setup your Content Security Policy appropriately. To use Google maps you at least need to add google.com to the default src, gstatic.com to data. These may not be enough, and if you they aren't probably the only option is looking at the errors in the developer console, see here how to get Chrome Developers console on Android, and here to see it on iOS. I always find a bunch of trial and error is required to CSP set just right.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' google.com data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline' google.com; media-src *">

That said, you probably don't want Google Maps taking control of your application (or maybe you do?) so other recommendations to use the In App Browser plugin would recommended. It's only adding one plugin and using some javascript to open the window:

cordova.InAppBrowser.open('https://www.google.com/maps/dir/?api=1&origin=43.9815648,7.5328161&destination=41.802425,12.6021389', '_blank', 'location=yes');
Kris Erickson
  • 33,454
  • 26
  • 120
  • 175
  • Where do you insert the first code line you posted? In the index.html file or somewhere else? – Piero Alberto Oct 23 '17 at 08:28
  • 1
    @PieroAlberto Yes, it goes in the head of the index file. If you create a new cordova/phonegap project ("cordova create newproject"), it will create a sample index.html that you can look at -- but you will have to adjust the CSP appropriately for your needs. – Kris Erickson Oct 23 '17 at 15:38
  • I have this error message if I use your CSP settings: "Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' google.com data: gap: https://ssl.gstatic.com". Why? – Piero Alberto Oct 25 '17 at 13:26
  • This seems to be ok: – Piero Alberto Oct 26 '17 at 14:31