nicholasruggeri/cookies-enabler

Problems with Google Maps Javascript API?

Opened this issue · 6 comments

beke64 commented

Hi,
I'm developing a new website using cookies-enabler and it work pretty well, as usual for youtube iframes, Google analytics and Google recaptcha scripts.

But in the contact page of this website I need to use the Google Javascript API to create a map with two marker and other personalizations and it won't work with cookies-enabler.

I've also tried to use postscribe as described in the documentation, but nothig, it won't works.

This is the code I'm using:

`

  | <script data-ce-src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXX" class="ce-script"></script>
  | <script class="ce-script">
  |  
  | var initialize = function() {
  |  
  | // DEFINISCE LE COORDINATE
  | var latlngCentro = new google.maps.LatLng(43.765182,11.250273);
  |  
  | // CREA LA MAPPA
  | var options = {
  | scrollwheel: false,
  | zoom: 14,
  | center: latlngCentro,
  | mapTypeId: google.maps.MapTypeId.ROADMAP
  | };
  |  
  | var map = new google.maps.Map(document.getElementById('map'), options);
  | window.onload = initialize;
  | </script>
  |  
  |
  | <script src="postscribe/src/postscribe.js"></script>
  | <script src="cookies-enabler/cookies-enabler.js"></script>
  | <script>
  | COOKIES_ENABLER.init({
  | scriptClass: 'ce-script',
  | iframeClass: 'ce-iframe',
  |  
  | acceptClass: 'ce-accept',
  | dismissClass: 'ce-dismiss',
  | disableClass: 'ce-disable',
  |  
  | bannerClass: 'ce-banner',
  | bannerHTML:
  | '

Lorem ipsum dolor sit amet '
  | +''+'cookie policy'+'.

'
  | +'

Lorem ipsum dolor sit amet '
  | +''+'Ok'+'

',
  |  
  | eventScroll: false,
  | scrollOffset: 200,
  |  
  | clickOutside: false,
  |  
  | cookieName: 'ce-cookie',
  | cookieDuration: '365',
  |  
  | iframesPlaceholder: true,
  | iframesPlaceholderHTML:
  | '

Lorem ipsum dolor sit amet '
  | +'Ok'
  | +'

',
  | iframesPlaceholderClass: 'ce-iframe-placeholder',
  |  
  | // Callbacks
  | onEnable: '',
  | onDismiss: '',
  | onDisable: ''
  | });
  | </script>
`
The chrome console says:

Uncaught ReferenceError: google is not defined at initialize (contatti.php:352)

Anyone has any suggestion to fix this problem, please?

gsimone commented
beke64 commented

Thanks for the answer Gianmarco.
I have done it, but nothing changes...

`
|
| <script type="text/plain" class="ce-script" data-ce-src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXX"></script>
| <script type="text/plain" class="ce-script">

| var initialize = function() {
| ...
`

gsimone commented

Please try to share a live environment or a complete reproduction.

beke64 commented

Sure, here it is: http://www.influsso.it/googlemap/

The upper grey box is a youtube iframe embedded, perfectly working, and the bottom grey box is the googlemap

gsimone commented

I see you are using a module version of postscribe ( notice the import statements in the postscribe.js file ). You should use a browser build like this one https://github.com/krux/postscribe#browser

beke64 commented

Thanks Gianmarco, now it works!!!
The map doesn't reload automatically like the iframe, anyway, do you think this can be fixed?
I mean that after clicking on the ce-banner I need to manually reload the page to see the Google map