Skip to content

Commit 92405c8

Browse files
KocalKocal
committed
[Map][Google] Upgrade @googlemaps/js-api-loader to ^2.0
1 parent e8a8a4d commit 92405c8

File tree

12 files changed

+122
-125
lines changed

12 files changed

+122
-125
lines changed

‎UPGRADE-3.0.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ class MyLiveComponent {
3131
* The Twig function `render_map()` has been removed, use `ux_map()` instead
3232
* The option `title` from `Polygon`, `Polyline`, `Rectangle` and `Circle`, has been removed, use option `infoWindow` instead
3333
* The property `rawOptions` from `ux:map:*:before-create` events has been removed, use `bridgeOptions` instead
34+
* The Google Map Bridge has been upgraded to use `@googlemaps/js-api-loader` version `^2.0.0`,
35+
which includes breaking changes on options configurable through `UX_MAP_DSN` query params
3436

3537
## Swup
3638

‎pnpm-lock.yaml‎

Lines changed: 26 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Map/src/Bridge/Google/CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44

55
- Minimum required Symfony version is now 6.4
66
- Minimum required PHP version is now 8.2
7+
- Upgrade `@googlemaps/js-api-loader` JavaScript package from `^1.16.6` to `^2.0.0`,
8+
which includes breaking changes on options configurable through `UX_MAP_DSN` query params:
9+
- Option `authReferrerPolicy`, `mapIds`, `channel`, `solutionChannel` have been added
10+
- Option `version` has been renamed to `v`
11+
- Options `ìd`, `nonce`, `retries`, `url` have been removed
712

813
## 2.30
914

‎src/Map/src/Bridge/Google/README.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,24 +26,24 @@ npm run watch
2626
```dotenv
2727
UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default
2828
29-
# With options
30-
UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?version=weekly
29+
# With
30+
UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?v=weekly
3131
UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?language=fr&region=FR
3232
UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?libraries[]=geometry&libraries[]=places
3333
```
3434

3535
Available options:
3636

37-
| Option | Description | Default |
38-
|-------------|------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------|
39-
| `id` | The id of the script tag | `__googleMapsScriptId` |
40-
| `language` | Force language, see [list of supported languages](https://developers.google.com/maps/faq#languagesupport) specified in the browser | The user's preferred language |
41-
| `region` | Unicode region subtag identifiers compatible with [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1) | |
42-
| `nonce` | Use a cryptographic nonce attribute | |
43-
| `retries` | The number of script load retries | 3 |
44-
| `url` | Custom url to load the Google Maps API script | `https://maps.googleapis.com/maps/api/js` |
45-
| `version` | The release channels or version numbers | `weekly` |
46-
| `libraries` | The additional libraries to load, see [list of supported libraries](https://googlemaps.github.io/js-api-loader/types/Library.html) | `['maps', 'marker']`, those two libraries are always loaded |
37+
| Option | Description | Default |
38+
|----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------|
39+
| `v` | The version of the Maps JavaScript API to load, could be a [release channels](https://developers.google.com/maps/documentation/javascript/versions) or version numbers | `weekly` |
40+
| `language` | The language to use, see [list of supported languages](https://developers.google.com/maps/faq#languagesupport) specified in the browser | The user's preferred language |
41+
| `region` | The region code to use, unicode region subtag identifiers compatible with [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1) | |
42+
| `libraries` | Additional libraries to load, see [list of supported libraries](https://developers.google.com/maps/documentation/javascript/libraries#available-libraries) | `['maps', 'marker']`, those two libraries are always loaded |
43+
| `authReferrerPolicy` | Set the referrer policy for the API requests | |
44+
| `mapIds` | An array of map IDs to preload | |
45+
| `channel` | Can be used to track your usage | |
46+
| `solutionChannel` | Used by the Google Maps Platform to track adoption and usage of examples and solutions | |
4747

4848
## Map options
4949

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { LoaderOptions } from '@googlemaps/js-api-loader';
1+
import { APIOptions } from '@googlemaps/js-api-loader';
22
import AbstractMapController, { MapDefinition, MarkerDefinition, PolygonDefinition, PolylineDefinition, CircleDefinition, RectangleDefinition, InfoWindowDefinition, Icon } from '@symfony/ux-map';
33

44
type MapOptions = Pick<google.maps.MapOptions, 'mapId' | 'gestureHandling' | 'backgroundColor' | 'disableDoubleClickZoom' | 'zoomControl' | 'zoomControlOptions' | 'mapTypeControl' | 'mapTypeControlOptions' | 'streetViewControl' | 'streetViewControlOptions' | 'fullscreenControl' | 'fullscreenControlOptions'>;
55
declare class export_default extends AbstractMapController<MapOptions, google.maps.MapOptions, google.maps.Map, google.maps.marker.AdvancedMarkerElementOptions, google.maps.marker.AdvancedMarkerElement, google.maps.InfoWindowOptions, google.maps.InfoWindow, google.maps.PolygonOptions, google.maps.Polygon, google.maps.PolylineOptions, google.maps.Polyline, google.maps.CircleOptions, google.maps.Circle, google.maps.RectangleOptions, google.maps.Rectangle> {
6-
providerOptionsValue: Pick<LoaderOptions, 'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version' | 'libraries'>;
6+
providerOptionsValue: Pick<APIOptions, 'key' | 'v' | 'language' | 'region' | 'libraries' | 'authReferrerPolicy' | 'mapIds' | 'channel' | 'solutionChannel'>;
77
map: google.maps.Map;
88
connect(): Promise<void>;
99
centerValueChanged(): void;

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

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// src/map_controller.ts
2-
import { Loader } from "@googlemaps/js-api-loader";
2+
import { importLibrary, setOptions } from "@googlemaps/js-api-loader";
33

44
// ../../../../assets/dist/abstract_map_controller.js
55
import { Controller } from "@hotwired/stimulus";
@@ -146,7 +146,6 @@ abstract_map_controller_default.values = {
146146
};
147147

148148
// src/map_controller.ts
149-
var _google;
150149
var _loading = false;
151150
var _loaded = false;
152151
var _onLoadedCallbacks = [];
@@ -163,22 +162,10 @@ var map_controller_default = class extends abstract_map_controller_default {
163162
return;
164163
}
165164
_loading = true;
166-
_google = { maps: {} };
167165
let { libraries = [], ...loaderOptions } = this.providerOptionsValue;
168-
const loader = new Loader(loaderOptions);
166+
setOptions(loaderOptions);
169167
libraries = ["core", ...libraries.filter((library) => library !== "core")];
170-
const librariesImplementations = await Promise.all(libraries.map((library) => loader.importLibrary(library)));
171-
librariesImplementations.map((libraryImplementation, index) => {
172-
if (typeof libraryImplementation !== "object" || libraryImplementation === null) {
173-
return;
174-
}
175-
const library = libraries[index];
176-
if (["marker", "places", "geometry", "journeySharing", "drawing", "visualization"].includes(library)) {
177-
_google.maps[library] = libraryImplementation;
178-
} else {
179-
_google.maps = { ..._google.maps, ...libraryImplementation };
180-
}
181-
});
168+
await Promise.all(libraries.map((library) => importLibrary(library)));
182169
_loading = false;
183170
_loaded = true;
184171
onLoaded();
@@ -206,7 +193,7 @@ var map_controller_default = class extends abstract_map_controller_default {
206193
}
207194
}
208195
dispatchEvent(name, payload = {}) {
209-
payload.google = _google;
196+
payload.google = google;
210197
this.dispatch(name, {
211198
prefix: "ux:map",
212199
detail: payload
@@ -218,7 +205,7 @@ var map_controller_default = class extends abstract_map_controller_default {
218205
options.mapTypeControl = typeof options.mapTypeControlOptions !== "undefined";
219206
options.streetViewControl = typeof options.streetViewControlOptions !== "undefined";
220207
options.fullscreenControl = typeof options.fullscreenControlOptions !== "undefined";
221-
return new _google.maps.Map(this.element, {
208+
return new google.maps.Map(this.element, {
222209
center,
223210
zoom,
224211
minZoom,
@@ -231,7 +218,7 @@ var map_controller_default = class extends abstract_map_controller_default {
231218
definition
232219
}) {
233220
const { "@id": _id, position, title, infoWindow, icon, bridgeOptions = {} } = definition;
234-
const marker = new _google.maps.marker.AdvancedMarkerElement({
221+
const marker = new google.maps.marker.AdvancedMarkerElement({
235222
position,
236223
title,
237224
map: this.map,
@@ -252,7 +239,7 @@ var map_controller_default = class extends abstract_map_controller_default {
252239
definition
253240
}) {
254241
const { "@id": _id, points, infoWindow, bridgeOptions = {} } = definition;
255-
const polygon = new _google.maps.Polygon({
242+
const polygon = new google.maps.Polygon({
256243
paths: points,
257244
map: this.map,
258245
...bridgeOptions
@@ -269,7 +256,7 @@ var map_controller_default = class extends abstract_map_controller_default {
269256
definition
270257
}) {
271258
const { "@id": _id, points, infoWindow, bridgeOptions = {} } = definition;
272-
const polyline = new _google.maps.Polyline({
259+
const polyline = new google.maps.Polyline({
273260
path: points,
274261
map: this.map,
275262
...bridgeOptions
@@ -284,7 +271,7 @@ var map_controller_default = class extends abstract_map_controller_default {
284271
}
285272
doCreateCircle({ definition }) {
286273
const { "@id": _id, center, radius, infoWindow, bridgeOptions = {} } = definition;
287-
const circle = new _google.maps.Circle({
274+
const circle = new google.maps.Circle({
288275
center,
289276
radius,
290277
map: this.map,
@@ -302,8 +289,8 @@ var map_controller_default = class extends abstract_map_controller_default {
302289
definition
303290
}) {
304291
const { northEast, southWest, infoWindow, bridgeOptions = {} } = definition;
305-
const rectangle = new _google.maps.Rectangle({
306-
bounds: new _google.maps.LatLngBounds(southWest, northEast),
292+
const rectangle = new google.maps.Rectangle({
293+
bounds: new google.maps.LatLngBounds(southWest, northEast),
307294
map: this.map,
308295
...bridgeOptions
309296
});
@@ -333,7 +320,7 @@ var map_controller_default = class extends abstract_map_controller_default {
333320
position,
334321
...bridgeOptions
335322
};
336-
const infoWindow = new _google.maps.InfoWindow(infoWindowOptions);
323+
const infoWindow = new google.maps.InfoWindow(infoWindowOptions);
337324
element.addListener("click", (event) => {
338325
if (autoClose) {
339326
this.closeInfoWindowsExcept(infoWindow);

‎src/Map/src/Bridge/Google/assets/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@
3636
},
3737
"importmap": {
3838
"@hotwired/stimulus": "^3.0.0",
39-
"@googlemaps/js-api-loader": "^1.16.6",
39+
"@googlemaps/js-api-loader": "^2.0.0",
4040
"@symfony/ux-google-map": "path:%PACKAGE%/dist/map_controller.js"
4141
}
4242
},
4343
"peerDependencies": {
44-
"@googlemaps/js-api-loader": "^1.16.6",
44+
"@googlemaps/js-api-loader": "^2.0.0",
4545
"@hotwired/stimulus": "^3.0.0"
4646
},
4747
"peerDependenciesMeta": {
@@ -50,7 +50,7 @@
5050
}
5151
},
5252
"devDependencies": {
53-
"@googlemaps/js-api-loader": "^1.16.6",
53+
"@googlemaps/js-api-loader": "^2.0.0",
5454
"@hotwired/stimulus": "^3.0.0",
5555
"@testing-library/dom": "^10.4.0",
5656
"@testing-library/jest-dom": "^6.6.3",

0 commit comments

Comments
 (0)