Skip to content

Commit 524aa1d

Browse files
KocalKocal
committed
bug #2854 [Map][Google] Fix race conditions when loading Google Maps API, when rendering >=2 maps (Kocal)
This PR was merged into the 2.x branch. Discussion ---------- [Map][Google] Fix race conditions when loading Google Maps API, when rendering >=2 maps | Q | A | ------------- | --- | Bug fix? | yes | New feature? | no <!-- please update src/**/CHANGELOG.md files --> | Docs? | no <!-- required for new features --> | Issues | Fix #2846 <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead --> | License | MIT <!-- Replace this notice by a description of your feature/bugfix. This will help reviewers and should be a good start for the documentation. Additionally (see https://symfony.com/releases): - Always add tests and ensure they pass. - For new features, provide some code snippets to help understand usage. - Features and deprecations must be submitted against branch main. - Update/add documentation as required (we can help!) - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry - Never break backward compatibility (see https://symfony.com/bc). --> https://github.com/user-attachments/assets/37f68d8a-7998-41d2-8eb8-46f1e6bd57a8 Commits ------- 6cea437 [Map][Google] Fix race conditions when loading Google Maps API, when rendering >=2 maps
2 parents 68da376 + 6cea437 commit 524aa1d

File tree

2 files changed

+80
-49
lines changed

2 files changed

+80
-49
lines changed

‎src/Map/src/Bridge/Google/assets/dist/map_controller.js‎

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -120,30 +120,44 @@ default_1.values = {
120120
};
121121

122122
let _google;
123+
let _loading = false;
124+
let _loaded = false;
125+
let _onLoadedCallbacks = [];
123126
const parser = new DOMParser();
124127
class map_controller extends default_1 {
125128
async connect() {
126-
if (!_google) {
127-
_google = { maps: {} };
128-
let { libraries = [], ...loaderOptions } = this.providerOptionsValue;
129-
const loader = new Loader(loaderOptions);
130-
libraries = ['core', ...libraries.filter((library) => library !== 'core')];
131-
const librariesImplementations = await Promise.all(libraries.map((library) => loader.importLibrary(library)));
132-
librariesImplementations.map((libraryImplementation, index) => {
133-
if (typeof libraryImplementation !== 'object' || libraryImplementation === null) {
134-
return;
135-
}
136-
const library = libraries[index];
137-
if (['marker', 'places', 'geometry', 'journeySharing', 'drawing', 'visualization'].includes(library)) {
138-
_google.maps[library] = libraryImplementation;
139-
}
140-
else {
141-
_google.maps = { ..._google.maps, ...libraryImplementation };
142-
}
143-
});
129+
const onLoaded = () => super.connect();
130+
if (_loaded) {
131+
onLoaded();
132+
return;
133+
}
134+
if (_loading) {
135+
_onLoadedCallbacks.push(onLoaded);
136+
return;
144137
}
145-
super.connect();
146-
this.parser = new DOMParser();
138+
_loading = true;
139+
_google = { maps: {} };
140+
let { libraries = [], ...loaderOptions } = this.providerOptionsValue;
141+
const loader = new Loader(loaderOptions);
142+
libraries = ['core', ...libraries.filter((library) => library !== 'core')];
143+
const librariesImplementations = await Promise.all(libraries.map((library) => loader.importLibrary(library)));
144+
librariesImplementations.map((libraryImplementation, index) => {
145+
if (typeof libraryImplementation !== 'object' || libraryImplementation === null) {
146+
return;
147+
}
148+
const library = libraries[index];
149+
if (['marker', 'places', 'geometry', 'journeySharing', 'drawing', 'visualization'].includes(library)) {
150+
_google.maps[library] = libraryImplementation;
151+
}
152+
else {
153+
_google.maps = { ..._google.maps, ...libraryImplementation };
154+
}
155+
});
156+
_loading = false;
157+
_loaded = true;
158+
onLoaded();
159+
_onLoadedCallbacks.forEach((callback) => callback());
160+
_onLoadedCallbacks = [];
147161
}
148162
centerValueChanged() {
149163
if (this.map && this.hasCenterValue && this.centerValue) {

‎src/Map/src/Bridge/Google/assets/src/map_controller.ts‎

Lines changed: 46 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,11 @@ type MapOptions = Pick<
3838

3939
let _google: typeof google;
4040

41+
// Loading the Google Maps API is an asynchronous operation, so we need to track the loading state to prevent race conditions.
42+
let _loading = false;
43+
let _loaded = false;
44+
let _onLoadedCallbacks: Array<() => void> = [];
45+
4146
const parser = new DOMParser();
4247

4348
export default class extends AbstractMapController<
@@ -64,39 +69,51 @@ export default class extends AbstractMapController<
6469
public parser: DOMParser;
6570

6671
async connect() {
67-
if (!_google) {
68-
_google = { maps: {} as typeof google.maps };
69-
70-
let { libraries = [], ...loaderOptions } = this.providerOptionsValue;
71-
72-
const loader = new Loader(loaderOptions);
73-
74-
// We could have used `loader.load()` to correctly load libraries, but this method is deprecated in favor of `loader.importLibrary()`.
75-
// But `loader.importLibrary()` is not a 1-1 replacement for `loader.load()`, we need to re-build the `google.maps` object ourselves,
76-
// see https://github.com/googlemaps/js-api-loader/issues/837 for more information.
77-
libraries = ['core', ...libraries.filter((library) => library !== 'core')]; // Ensure 'core' is loaded first
78-
const librariesImplementations = await Promise.all(
79-
libraries.map((library) => loader.importLibrary(library))
80-
);
81-
librariesImplementations.map((libraryImplementation, index) => {
82-
if (typeof libraryImplementation !== 'object' || libraryImplementation === null) {
83-
return;
84-
}
72+
const onLoaded = () => super.connect();
8573

86-
const library = libraries[index];
74+
if (_loaded) {
75+
onLoaded();
76+
return;
77+
}
8778

88-
// The following libraries are in a sub-namespace
89-
if (['marker', 'places', 'geometry', 'journeySharing', 'drawing', 'visualization'].includes(library)) {
90-
// @ts-ignore
91-
_google.maps[library] = libraryImplementation as any;
92-
} else {
93-
_google.maps = { ..._google.maps, ...libraryImplementation };
94-
}
95-
});
79+
if (_loading) {
80+
_onLoadedCallbacks.push(onLoaded);
81+
return;
9682
}
9783

98-
super.connect();
99-
this.parser = new DOMParser();
84+
_loading = true;
85+
_google = { maps: {} as typeof google.maps };
86+
87+
let { libraries = [], ...loaderOptions } = this.providerOptionsValue;
88+
89+
const loader = new Loader(loaderOptions);
90+
91+
// We could have used `loader.load()` to correctly load libraries, but this method is deprecated in favor of `loader.importLibrary()`.
92+
// But `loader.importLibrary()` is not a 1-1 replacement for `loader.load()`, we need to re-build the `google.maps` object ourselves,
93+
// see https://github.com/googlemaps/js-api-loader/issues/837 for more information.
94+
libraries = ['core', ...libraries.filter((library) => library !== 'core')]; // Ensure 'core' is loaded first
95+
const librariesImplementations = await Promise.all(libraries.map((library) => loader.importLibrary(library)));
96+
librariesImplementations.map((libraryImplementation, index) => {
97+
if (typeof libraryImplementation !== 'object' || libraryImplementation === null) {
98+
return;
99+
}
100+
101+
const library = libraries[index];
102+
103+
// The following libraries are in a sub-namespace
104+
if (['marker', 'places', 'geometry', 'journeySharing', 'drawing', 'visualization'].includes(library)) {
105+
// @ts-ignore
106+
_google.maps[library] = libraryImplementation as any;
107+
} else {
108+
_google.maps = { ..._google.maps, ...libraryImplementation };
109+
}
110+
});
111+
112+
_loading = false;
113+
_loaded = true;
114+
onLoaded();
115+
_onLoadedCallbacks.forEach((callback) => callback());
116+
_onLoadedCallbacks = [];
100117
}
101118

102119
public centerValueChanged(): void {

0 commit comments

Comments
 (0)