Problem/Motivation

Using a Google Maps map I get the following warning:

Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance. For best-practice loading patterns please see https://goo.gle/js-api-loading

The module is using defer="defer" async="async" in the script tag to load the library, and it looks this is not good enough. Besides, I think we shouldn't be using both defer and async, it should be one or the other, in any case.

Steps to reproduce

Place a map from a Geolocation field.

Proposed resolution

Adjust the implementation to one of the approached suggested in https://goo.gle/js-api-loading.

CommentFileSizeAuthor
#5 3461359-warning-google-maps-5.patch2.19 KBhemangi.gokhale

Issue fork geolocation-3461359

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

juanolalla created an issue. See original summary.

christianadamski’s picture

christianadamski commented
Status: Active » Closed (won't fix)

v3 loads this stuff via core, so no async. v4 has this fixed through massive refactors.

hemangi.gokhale’s picture

hemangi.gokhale
she/her/hers
Primary language English
Location Portland, 🇺🇸
commented
Version: 8.x-3.x-dev » 4.x-dev
Assigned: Unassigned » hemangi.gokhale
Status: Closed (won't fix) » Needs work

Unfortunately, I'm getting this error using v4.

hemangi.gokhale opened merge request !120

hemangi.gokhale’s picture

hemangi.gokhale
she/her/hers
Primary language English
Location Portland, 🇺🇸
commented
Component: Javascript General / Frontend » Geolocation Field / Backend
Assigned: hemangi.gokhale » Unassigned
Status: Needs work » Needs review
StatusFileSize
new 3461359-warning-google-maps-5.patch2.19 KB

Added the callback and loading=async to GoogleGeocodingAPI.php so the geocoder uses the exact same Google Maps URL as the map.

Updated GoogleGeocodingAPI.js to use addMapProviderCallback("Google", …) instead of waiting on the addScript promise, matching the map's loading behavior.

Now both components request the same Google Maps URL (allowing addScript to deduplicate) and wait for the same callback (DrupalGeolocationGoogleLoader). Attached is the patch from the MR.

christianadamski’s picture

christianadamski commented
Status: Needs review » Fixed

Thanks!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.