From a645bf61c2ab7e0d8b072c13035f8073e6980ebc Mon Sep 17 00:00:00 2001 From: Cyperghost Date: Thu, 24 Oct 2024 12:22:55 +0200 Subject: [PATCH] Use `google.maps.Marker` instead of `google.maps.marker.AdvancedMarkerElement` --- .../Core/Component/GoogleMaps/Geocoding.ts | 14 ++++++++----- .../Core/Component/GoogleMaps/Marker.ts | 20 ++++++++++--------- .../Core/Component/GoogleMaps/MarkerLoader.ts | 2 +- .../Core/Component/GoogleMaps/Geocoding.js | 12 +++++++---- .../Core/Component/GoogleMaps/Marker.js | 12 +++++------ .../Core/Component/GoogleMaps/MarkerLoader.js | 2 +- 6 files changed, 36 insertions(+), 26 deletions(-) diff --git a/ts/WoltLabSuite/Core/Component/GoogleMaps/Geocoding.ts b/ts/WoltLabSuite/Core/Component/GoogleMaps/Geocoding.ts index 3a85783a36..517e202bfa 100644 --- a/ts/WoltLabSuite/Core/Component/GoogleMaps/Geocoding.ts +++ b/ts/WoltLabSuite/Core/Component/GoogleMaps/Geocoding.ts @@ -27,7 +27,7 @@ export type ResolveEventPayload = { class Geocoding { readonly #element: HTMLInputElement; readonly #map: WoltlabCoreGoogleMapsElement; - #marker?: google.maps.Marker; + #marker?: google.maps.marker.AdvancedMarkerElement; #initialMarkerPosition?: google.maps.LatLng; constructor(element: HTMLInputElement, map: WoltlabCoreGoogleMapsElement) { @@ -78,11 +78,11 @@ class Geocoding { async #setupMarker(): Promise { this.#marker = await addDraggableMarker(this.#map); - this.#initialMarkerPosition = this.#marker.getPosition() as google.maps.LatLng; + this.#initialMarkerPosition = this.#marker?.position as google.maps.LatLng; this.#marker.addListener("dragend", () => { void this.#map.getGeocoder().then((geocoder) => { - void geocoder.geocode({ location: this.#marker!.getPosition() }, (results, status) => { + void geocoder.geocode({ location: this.#marker!.position! }, (results, status) => { if (status === google.maps.GeocoderStatus.OK) { this.#element.value = results![0].formatted_address; this.#setLocation(results![0].geometry.location.lat(), results![0].geometry.location.lng()); @@ -94,7 +94,9 @@ class Geocoding { async #moveMarkerToLocation(latitude: number, longitude: number): Promise { const location = new google.maps.LatLng(latitude, longitude); - this.#marker?.setPosition(location); + if (this.#marker) { + this.#marker.position = location; + } (await this.#map.getMap()).setCenter(location); this.#setLocation(latitude, longitude); } @@ -103,7 +105,9 @@ class Geocoding { const geocoder = await this.#map.getGeocoder(); void geocoder.geocode({ address }, async (results, status) => { if (status === google.maps.GeocoderStatus.OK) { - this.#marker?.setPosition(results![0].geometry.location); + if (this.#marker) { + this.#marker.position = results![0].geometry.location; + } (await this.#map.getMap()).setCenter(results![0].geometry.location); this.#setLocation(results![0].geometry.location.lat(), results![0].geometry.location.lng()); diff --git a/ts/WoltLabSuite/Core/Component/GoogleMaps/Marker.ts b/ts/WoltLabSuite/Core/Component/GoogleMaps/Marker.ts index b86f7af663..245214c5e0 100644 --- a/ts/WoltLabSuite/Core/Component/GoogleMaps/Marker.ts +++ b/ts/WoltLabSuite/Core/Component/GoogleMaps/Marker.ts @@ -19,28 +19,30 @@ export async function addMarker( ): Promise { const map = await element.getMap(); - const marker = new google.maps.Marker({ + const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: new google.maps.LatLng(latitude, longitude), title, }); if (focus) { - map.setCenter(marker.getPosition()!); + map.setCenter(marker.position!); } } -export async function addDraggableMarker(element: WoltlabCoreGoogleMapsElement): Promise; +export async function addDraggableMarker( + element: WoltlabCoreGoogleMapsElement, +): Promise; export async function addDraggableMarker( element: WoltlabCoreGoogleMapsElement, latitude: number, longitude: number, -): Promise; +): Promise; export async function addDraggableMarker( element: WoltlabCoreGoogleMapsElement, latitude?: number, longitude?: number, -): Promise { +): Promise { const map = await element.getMap(); if (latitude === undefined) { @@ -50,14 +52,14 @@ export async function addDraggableMarker( longitude = element.lng; } - const marker = new google.maps.Marker({ + const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: new google.maps.LatLng(latitude, longitude), - draggable: true, - clickable: false, + gmpDraggable: true, + gmpClickable: false, }); - map.setCenter(marker.getPosition()!); + map.setCenter(marker.position!); return marker; } diff --git a/ts/WoltLabSuite/Core/Component/GoogleMaps/MarkerLoader.ts b/ts/WoltLabSuite/Core/Component/GoogleMaps/MarkerLoader.ts index ad44a2dab1..9117ee85db 100644 --- a/ts/WoltLabSuite/Core/Component/GoogleMaps/MarkerLoader.ts +++ b/ts/WoltLabSuite/Core/Component/GoogleMaps/MarkerLoader.ts @@ -90,7 +90,7 @@ class MarkerLoader { } #addMarker(data: MarkerData) { - const marker = new google.maps.Marker({ + const marker = new google.maps.marker.AdvancedMarkerElement({ map: this.#map, position: new google.maps.LatLng(data.latitude, data.longitude), title: data.title, diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GoogleMaps/Geocoding.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GoogleMaps/Geocoding.js index 16e157f1a9..7d79d3fa0f 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GoogleMaps/Geocoding.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GoogleMaps/Geocoding.js @@ -53,10 +53,10 @@ define(["require", "exports", "../../Helper/Selector", "./Geocoding/Suggestion", } async #setupMarker() { this.#marker = await (0, Marker_1.addDraggableMarker)(this.#map); - this.#initialMarkerPosition = this.#marker.getPosition(); + this.#initialMarkerPosition = this.#marker?.position; this.#marker.addListener("dragend", () => { void this.#map.getGeocoder().then((geocoder) => { - void geocoder.geocode({ location: this.#marker.getPosition() }, (results, status) => { + void geocoder.geocode({ location: this.#marker.position }, (results, status) => { if (status === google.maps.GeocoderStatus.OK) { this.#element.value = results[0].formatted_address; this.#setLocation(results[0].geometry.location.lat(), results[0].geometry.location.lng()); @@ -67,7 +67,9 @@ define(["require", "exports", "../../Helper/Selector", "./Geocoding/Suggestion", } async #moveMarkerToLocation(latitude, longitude) { const location = new google.maps.LatLng(latitude, longitude); - this.#marker?.setPosition(location); + if (this.#marker) { + this.#marker.position = location; + } (await this.#map.getMap()).setCenter(location); this.#setLocation(latitude, longitude); } @@ -75,7 +77,9 @@ define(["require", "exports", "../../Helper/Selector", "./Geocoding/Suggestion", const geocoder = await this.#map.getGeocoder(); void geocoder.geocode({ address }, async (results, status) => { if (status === google.maps.GeocoderStatus.OK) { - this.#marker?.setPosition(results[0].geometry.location); + if (this.#marker) { + this.#marker.position = results[0].geometry.location; + } (await this.#map.getMap()).setCenter(results[0].geometry.location); this.#setLocation(results[0].geometry.location.lat(), results[0].geometry.location.lng()); } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GoogleMaps/Marker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GoogleMaps/Marker.js index dbf86a5bd1..f4f3b203f4 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GoogleMaps/Marker.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GoogleMaps/Marker.js @@ -12,13 +12,13 @@ define(["require", "exports", "./woltlab-core-google-maps"], function (require, exports.addDraggableMarker = addDraggableMarker; async function addMarker(element, latitude, longitude, title, focus) { const map = await element.getMap(); - const marker = new google.maps.Marker({ + const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: new google.maps.LatLng(latitude, longitude), title, }); if (focus) { - map.setCenter(marker.getPosition()); + map.setCenter(marker.position); } } async function addDraggableMarker(element, latitude, longitude) { @@ -29,13 +29,13 @@ define(["require", "exports", "./woltlab-core-google-maps"], function (require, if (longitude === undefined) { longitude = element.lng; } - const marker = new google.maps.Marker({ + const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: new google.maps.LatLng(latitude, longitude), - draggable: true, - clickable: false, + gmpDraggable: true, + gmpClickable: false, }); - map.setCenter(marker.getPosition()); + map.setCenter(marker.position); return marker; } }); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GoogleMaps/MarkerLoader.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GoogleMaps/MarkerLoader.js index bca3b715fc..c2524f66ef 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GoogleMaps/MarkerLoader.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GoogleMaps/MarkerLoader.js @@ -58,7 +58,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../Dialog", "../../Dom/Uti }); } #addMarker(data) { - const marker = new google.maps.Marker({ + const marker = new google.maps.marker.AdvancedMarkerElement({ map: this.#map, position: new google.maps.LatLng(data.latitude, data.longitude), title: data.title, -- 2.20.1