Javascript fails when running maps.google.Geocoder ()

advertisements

My code fails when it tries to execute the google maps api: maps.google.Geocoder();

In the following code the second alert does not run:

scope.locations = [];
alert('IGP scope.locations = '+scope.locations);
var geocoder = new google.maps.Geocoder();
alert('geocoder = ' + geocoder);

The Google maps api is included in my index.html file as follows:

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

<script src="lib/ion-google-place/ion-google-place.js"></script>

Can anyone suggest how I can find out why this is failing? The code works ok when run on a browser but fails when part of an ionic app running on a phone.

UPDATE

I have found the cause but have no idea why this is causing the problem. If I remove the following line from my index.html the google maps stuff works ok:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

My remaining problem though is that I need this line to solve a problem I have been having with logging in on Android phones! All very strange.


I was just looking for an answer to this as well!

Have attached to my Android device via the "chrome://inspect" option, and there's a script error:

ReferenceError: google is not defined
    at link (file:///android_asset/www/lib/ion-google-place/ion-google-place.js:17:40)

which is the line:

var geocoder = new google.maps.Geocoder();

(Note that I'm using the forked version: https://github.com/gfnork/ion-google-place which seems to be better maintained.

I'll update this once I've figured out the rest, but hope this helps in the mean time (I don't have enough reputation to add this as a comment...)

-- UPDATE 1 --

In the network log, the following script is not getting loaded:

http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false

So, that would seem to be the root cause. Perhaps it's a Cordova whitelisting issue?

-- UPDATE 2 - Solved --

So after spending hours trying various different Content Security Policy variations and variants on the script tag, it came down to an out of date version of the Android platform installed.

Try this:

  1. Save your plugins with: "cordova plugin save"
  2. Remove Android as a platform with: "ionic platform rm android" then add it back again with: "ionic platform add android"
  3. Try rebuilding and running.

My android version in /platforms/platforms.json was 4.0 something, and it is now: { "android": "4.1.1" }

My Content Security Policy is set to:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">

And my script call is: <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={{API-KEY}}&libraries=places&sensor=false"></script>