Console error and maps are not loading

[boboci9]

Hi,

Hi I have tried the example from the following link http://meteorcapture.com/how-to-create-a-reactive-google-map/, and I also tried the demo package but I still get the follwoing error:

Refused to load the script 'https://maps.googleapis.com/maps/api/js?v=3.exp&callback=GoogleMaps.initialize' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' http://www.google-analytics.com https://www.google-analytics.com http://.doubleclick.net https://.doubleclick.net"
Can you help me please?
Thanks

[dburles]

Hey @boboci9 do you see this error locally or in production?

[boboci9]

Hi @dburles I see it locally.

[dburles]

Are you using the browser-policy package by any chance? https://atmospherejs.com/meteor/browser-policy

[boboci9]

Hi, I managed to fix it I needed a forth setting for ajax as well
BrowserPolicy.content.allowOriginForAll('fonts.gstatic.com');
BrowserPolicy.content.allowOriginForAll('*.googleapis.com');
BrowserPolicy.content.allowOriginForAll('maps.gstatic.com');
BrowserPolicy.content.allowEval('https://ajax.googleapis.com'); // it's not working without this line
Thank you for your help!!!

[dandv]

@dburles: would be good to make a note re. browser-policy in the README?

[dburles]

@dandv I'd like to, I just wasn't sure if the urls above were officially dictated by Google, @boboci9 ?

[boboci9]

I'm not sure, I just read through posts/issues related to this error and combined some of the solutions.
#12
#27
These were similar issues, important to have ajax line there, it's not working without it.

[boboci9]

Hi, my google maps are not working again, they were fine until recently. Now I am seeing this error again:

Refused to load the image 'https://csi.gstatic.com/csi?v=2&s=mapsapi3&action=apiboot2&rt=main.505,firstmap.558' because it violates the following Content Security Policy directive

I have

    BrowserPolicy.content.allowOriginForAll('fonts.gstatic.com');
    BrowserPolicy.content.allowOriginForAll('*.googleapis.com');
    BrowserPolicy.content.allowOriginForAll('maps.gstatic.com');
    BrowserPolicy.content.allowEval('https://ajax.googleapis.com');  

I tried adding BrowserPolicy.content.allowOriginForAll('http://csi.gstatic.com/csi'); but the error is still there, does anyone know what else can be added? My map is not showing, it's only a grey box.

Thanks.

[dburles]

Hey @boboci9 try these:

    BrowserPolicy.content.allowOriginForAll('*.googleapis.com');
    BrowserPolicy.content.allowOriginForAll('*.gstatic.com');
    BrowserPolicy.content.allowEval('https://ajax.googleapis.com');  

[dburles]

@boboci9 did they solve the issue?

[jurgenfink]

@dburles it sure did for me - thanks so much for your good work (I was fiddling around on that for quite a while)
I had the same issue - your last comment resolved nicely - smooth like a baby now.
I am using:

• Meteor 1.2.0.2
• dburles:google-maps (your package, works nicely)
• jeremy:geocomplete
• browser-policy , version 1.0.5
• browser-policy-common , version 1.0.4
• browser-policy-content , version 1.0.6
• browser-policy-framing , version 1.0.6

I added into my policy.js also recomendation from David Weldon , hence I have:

BrowserPolicy.framing.disallow();
BrowserPolicy.content.disallowInlineScripts();
BrowserPolicy.content.disallowEval();
BrowserPolicy.content.allowInlineStyles();
BrowserPolicy.content.allowFontDataUrl();

var trusted = [
  '*.google-analytics.com'
];

_.each(trusted, function(origin) {
  origin = "https://" + origin;
  BrowserPolicy.content.allowOriginForAll(origin);
});

and then adding your lines as you suggested above:

BrowserPolicy.content.allowOriginForAll('*.googleapis.com');
BrowserPolicy.content.allowOriginForAll('*.gstatic.com');
BrowserPolicy.content.allowEval('https://ajax.googleapis.com');

Again thanks - you made my day 👍
( David Burles for President, yeahhhhh :-) )

[Noveltysa]

I have applied all the suggestion listed here, I still get the error(in the server console)android:http://localhost:12656/packages/dburles_google-maps.js:62) Uncaught TypeError: Cannot read property 'appendChild' of null

The error (in the browser console) was solved with BrowserPolicy.

Any ideas? or anywhere to check? Plus This error appears only when I run meteor run android-device .... tried meter reset ..../ build ...I also have App.accessRule('*'); in mobile-config.js

[Noveltysa]

I managed to figure what I was doing wrong:
I was loading googlemaps in client/startup.js ...before DOM is created, initializing googlemaps in the Template..onCreated worked in my case.