CODEWITHSUNDEEP
javascriptwordpressgoogle-mapsasynchronousgoogle-maps-api-3
Sam
Sam

Reputation: 1461

Multiple Google Maps slows WordPress admin

I'm using the WordPress ACF plugin to create a repeater field. The repeater field allows admin to add multiple markers to a Google Map.

ACF Repeater with Google Maps

When we originally built the site, it was designed to handle around 20 markers. The client has since added over 150 markers. This means that 150 instances of Google Maps is loading in the back-end and slowing everything down.

Is there a way to implement an asynchronous Google Map for each field?

Upvotes: 0

Views: 316

Answers (1)

Android Enthusiast
Android Enthusiast

Reputation: 4960

When a browser parses a traditional script tag, it must wait for the script to download, parse, and execute before rendering any HTML that comes after it. With an asynchronous script, however, the browser can continue parsing and rendering HTML that comes after the a sync script, without waiting for that script to complete. When a script is loaded asynchronously, it is fetched as soon as possible, but its execution is deferred until the browser's UI thread is not busy doing something else, such as rendering the web page.

Another trick is that javascript file at maps.googleapis.com/maps/api/js is a dynamic one. The serverresponds with a different js file for different parameters. 

function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}

When a script is loaded synchronously, the browser waits for it to load completely and when the script calls the document.write, the text is appended to the document being loaded. But asynchronous call is made once a document is fully loaded. When you load the js with "callback=initialize", the self executing function already contains the call back to initialize, and a modified function which can load further scripts asynchronously.

Found this related ticket, discussing how to load Google maps asynchronously: Loading google maps asynchronously

Upvotes: 1

Related Questions