Support

Account

Register Login

Home › Forums › General Issues › Solution needed for slow Google Maps loading.

Solving

Solution needed for slow Google Maps loading.

  • I have created a campground site in Massachuetts and the page loads fine, on the main campground page I have a large google map with all the campground locations in the state pinned to the map.

    The problem is Google Maps hammers your Core Web Vitals rating. I came across a general solution, create an image of the map and load that, then once the page has fully loaded load the actual google map allowing visitors to zoom in or click on a pin.

    https://www.corewebvitals.io/pagespeed/google-maps-100-percent-pagespeed

    This site provides a solution but they rely on loading in an iframe a url for the map using js in the footer. This is where I am stuck, I don’t know how to trigger the ACF Google Map to load once the page has loaded.

    Any suggestions?

  • Rather than having users download the map image and then load the actual map I was thinking, how about I leave a white space where the map will be rendered and then load the google maps.

    The main problem I am running into now is adding to src=”https://maps.googleapis.com/maps/api/js?key=KEYHERE&callback=initMap” &callback=initMap does not work. It gives some sort of console error “_.te”

    I figure it is not seeing the function initMap that is in the jquery code on the https://www.advancedcustomfields.com/resources/google-map/ page.

    When I use the js css and html code on this site:
    https://developers.google.com/maps/documentation/javascript/overview#maps_map_simple-javascript
    I am able to include the &callback=initMap in the src field and the map loads last and the performance in core web vitals is 95%+. Without the &callback=initMap I am unable to get the performance rating above 80%.

    Any suggestions on how to get &callback=initMap working with ACF Google Maps?

  • I don’t have a specific solution for you, but what you need to do is to load the script and then do the map initialization

    
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<scirpt>
   ... code here

    This means that you need to create a function that runs when the page loads that does all of this, first inserting the google maps api script into the header and then doing the initialization.

    
(function($){
   // insert https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY into document <head>
   // initialize maps
}(jQuery);

    Google is really good at destroying your page speed, aren’t then? Anyway, I do not think that this will improve your page load time. The main issue is that the script is still running automatically. I realize this has nothing to do with ACF but having gone through a similar excercise with youtube videos it is important to not. The only real way to improve page speed is that there is some other condition for loading the script other then when the page is loaded, for example with an onclick or in mycase I did the intialization on mouse over so the some specific action is needed. You could also potentially use a timeout. In order to improve page performance there needs to be a significant break (idle) in script execution so that the tools for testing performance detect that the page is loaded.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.