I have a page with a Google Map (https://agevansville.com/need-help-lets-talk) in the right column which is powered by GetLocations module (https://www.drupal.org/project/getlocations) and Views. However when I have AdvAgg Modifier turned on and settings turned on from different articles I have read to help get the page score up on Google Page Speed it breaks that Google Map. As soon as I turn off AdvAgg Modifier the map returns.

Can anyone help with adjusting the settings so that the Google Map shows up but I still get a good score with having render blocking JS and CCS below the fold?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ryanfc78 created an issue. See original summary.

ryanfc78’s picture

Issue summary: View changes
FileSize
222.75 KB
ryanfc78’s picture

Another screen shot

mikeytown2’s picture

It's most likely move everything to the footer that is causing issues. You can try checking this box first to see if that fixes the issue for you "Put a wrapper around inline JS if it was added in the content section incorrectly"

ryanfc78’s picture

I just tried that and it still does not work. It is from moving everything to the footer. I tried all 4 options but the only thing that makes it work again is disabling it.

Does anything need to go in the INLINE WRAPPER SETTINGS field? It talks about var google_conversion_id = XXX; but I don't know where you get the ID.

mikeytown2’s picture

Title: Google Map Issues with AdvAgg Modifier » getlocations module not compatible with advagg mod footer js

"Inline skip list for wrapper code" No this used if the inline code can not be wrapped up and ran later. Looking at this and it seems like this should have fixed it; if it's not working then that means the map code is outside of the content areas that advagg scans (in this case a tpl file).

"google_conversion_id" has to do with ads; js ad code is notorious for not working with out of order js execution. This is used as an example of something that breaks when the inline wrapper is enabled.

From my 10 minutes of poking around it appears that the getlocations module expects its js to be in the header and will break if not done so. This happens because the getlocations.js starts by define some variables without first checking to see if they have already been defined.

This is the issue. Inside your HTML above where getlocations.js gets loaded this bit of js code is ran Drupal.getlocations_data["key_1"] = {"datanum":1,"latlons":[["37.988094","-87.475967","1","","agmarker","nid","",""]],"minmaxes":""};.

Then inside getlocations.js, this is ran.

  Drupal.getlocations_inputmap = [];
  Drupal.getlocations_pano = [];
  Drupal.getlocations_data = [];
  Drupal.getlocations_markers = [];
  Drupal.getlocations_settings = [];
  Drupal.getlocations_map = [];

Drupal.getlocations_data is now empty.

The fix is to change this so it looks like this

  Drupal.getlocations_inputmap = Drupal.getlocations_inputmap || [];
  Drupal.getlocations_pano = Drupal.getlocations_pano || [];
  Drupal.getlocations_data = Drupal.getlocations_data || [];
  Drupal.getlocations_markers = Drupal.getlocations_markers || [];
  Drupal.getlocations_settings = Drupal.getlocations_settings || [];
  Drupal.getlocations_map = Drupal.getlocations_map || [];

There might be other issues as well but this is the first step...

ryanfc78’s picture

I changed that, cleared cache and ran cron, but the map still does not show up.

webservant316’s picture

I just ran into this problem... I was able to keep advagg running by disabling a few options under the Modifications tab. Here are the things I disabled...

Most of the time adjusting the settings are safe but in some rare cases adjusting these can cause serious JavaScript issues with your site.
Move JS to the footer => Disabled

If you have JavaScript inline in the body of your document, such as if you are displaying ads, you may need to keep Drupal JS Libraries in the head instead of moving them to the footer. This will keep all JS added with the JS_LIBRARY group in the head while still moving all other JavaScript to the footer.
Deferred JavaScript Execution: Add The defer Tag To All Script Tags => Disabled

This will delay the script execution until the HTML parser has finished. This will have a similar effect to moving all JavaScript to the footer. This might break javascript (especially inline); only use after extensive testing! More Info
Asynchronous JavaScript Execution: Group together in the header => Disabled
Put a wrapper around inline JS if it was added in the content section incorrectly => Disabled
Deferred inline JavaScript Execution: Put a wrapper around inline JS so it runs from a setTimeout call. => Disabled

I don't have any clue why this is the case, but just reporting back what worked for me.

ryanfc78’s picture

Wish this would work even with JS moved to the footer.

mikeytown2’s picture

danzVP06’s picture

I tried changing the getlocation.js as per comment #6 and applied the patch from comment #10

The first loading of the website from incognito works fine. but after reloading it or going to other pages, getlocation gives an error on my end.

Uncaught TypeError: Cannot read property 'datanum' of undefined
    at HTMLDivElement.<anonymous> (getlocations.js:144)
    at Function.each (jquery.min.js:2)
    at $.fn.init.each (jquery.min.js:2)
    at $.fn.init.$.fn.once (jquery.once.js:55)
    at Object.attach (getlocations.js:28)
    at Object.<anonymous> (drupal.js:76)
    at Function.each (jquery.min.js:2)
    at Object.Drupal.attachBehaviors (drupal.js:74)
    at HTMLDocument.<anonymous> (drupal.js:504)
    at o (jquery.min.js:2)

Update:

I also applied this patch, still nothing.
I tried to make the js inline on specific pages (the ones that has map). It works well. But I don't like making my JS inline because it's a lot of JS that's from different kinds of module

mikeytown2’s picture

Is this still relevant?

mikeytown2’s picture

Status: Active » Postponed (maintainer needs more info)
mikeytown2’s picture

Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)