Skip to content

Commit c6265d6

Browse files
KocalKocal
committed
bug #2858 [Map][Google] Fix InfoWindow compatibility with Circle and Rectangle (Kocal)
This PR was merged into the 2.x branch. Discussion ---------- [Map][Google] Fix `InfoWindow` compatibility with `Circle` and `Rectangle` | Q | A | ------------- | --- | Bug fix? | yes | New feature? | no <!-- please update src/**/CHANGELOG.md files --> | Docs? | no <!-- required for new features --> | Issues | Fix #... <!-- 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). --> Looks like using `InfoWindow` with Google Maps `Circle` and `Rectangle` has not been tested when working on #2845 and #2838 :( Commits ------- ac68141 [Map][Google] Fix `InfoWindow` compatibility with `Circle` and `Rectangle`
2 parents 2229b7a + ac68141 commit c6265d6

File tree

4 files changed

+83
-58
lines changed

4 files changed

+83
-58
lines changed

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,26 @@
11
# CHANGELOG
22

3+
## 2.27
4+
5+
- Fix `InfoWindow` compatibility with new `Circle` and `Rectangle` supported elements.
6+
7+
This fix led to a refactoring that can impact the `InfoWindow` position when used with `Polygon` or `Polyline`,
8+
because their shapes are too complex.
9+
Instead, listen to the `ux:map:info-window:before-create` event to set the position manually.
10+
```js
11+
this.element.addEventListener('ux:map:info-window:before-create', (event) => {
12+
const { google, element, definition } = event.detail;
13+
14+
if (element instanceof google.maps.Polygon) {
15+
// Set the position to the center of the polygon
16+
const bounds = new google.maps.LatLngBounds();
17+
18+
element.getPath().forEach((latLng) => bounds.extend(latLng));
19+
definition.infoWindow.rawOptions.position = bounds.getCenter();
20+
}
21+
});
22+
```
23+
324
## 2.25
425

526
- Downgrade PHP requirement from 8.3 to 8.1

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default class extends AbstractMapController<MapOptions, google.maps.Map,
3737
protected doRemoveRectangle(rectangle: google.maps.Rectangle): void;
3838
protected doCreateInfoWindow({ definition, element, }: {
3939
definition: InfoWindowWithoutPositionDefinition<google.maps.InfoWindowOptions>;
40-
element: google.maps.marker.AdvancedMarkerElement | google.maps.Polygon | google.maps.Polyline;
40+
element: google.maps.marker.AdvancedMarkerElement | google.maps.Polygon | google.maps.Polyline | google.maps.Circle | google.maps.Rectangle;
4141
}): google.maps.InfoWindow;
4242
protected doFitBoundsToMarkers(): void;
4343
private createTextOrElement;

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

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -294,40 +294,36 @@ class map_controller extends default_1 {
294294
rectangle.setMap(null);
295295
}
296296
doCreateInfoWindow({ definition, element, }) {
297-
const { headerContent, content, extra, rawOptions = {}, ...otherOptions } = definition;
298-
const infoWindow = new _google.maps.InfoWindow({
297+
const { headerContent, content, opened, autoClose, rawOptions = {} } = definition;
298+
let position = null;
299+
if (element instanceof google.maps.Circle) {
300+
position = element.getCenter();
301+
}
302+
else if (element instanceof google.maps.Rectangle) {
303+
position = element.getBounds()?.getCenter() || null;
304+
}
305+
else if (element instanceof google.maps.Polygon || element instanceof google.maps.Polyline) ;
306+
const infoWindowOptions = {
299307
headerContent: this.createTextOrElement(headerContent),
300308
content: this.createTextOrElement(content),
301-
...otherOptions,
309+
position,
302310
...rawOptions,
303-
});
304-
if (element instanceof google.maps.marker.AdvancedMarkerElement) {
305-
element.addListener('click', () => {
306-
if (definition.autoClose) {
307-
this.closeInfoWindowsExcept(infoWindow);
308-
}
309-
infoWindow.open({ map: this.map, anchor: element });
310-
});
311-
if (definition.opened) {
312-
infoWindow.open({ map: this.map, anchor: element });
311+
};
312+
const infoWindow = new _google.maps.InfoWindow(infoWindowOptions);
313+
element.addListener('click', (event) => {
314+
if (autoClose) {
315+
this.closeInfoWindowsExcept(infoWindow);
313316
}
314-
}
315-
else if (element instanceof google.maps.Polygon) {
316-
element.addListener('click', (event) => {
317-
if (definition.autoClose) {
318-
this.closeInfoWindowsExcept(infoWindow);
319-
}
317+
if (infoWindowOptions.position === null) {
320318
infoWindow.setPosition(event.latLng);
321-
infoWindow.open(this.map);
322-
});
323-
if (definition.opened) {
324-
const bounds = new google.maps.LatLngBounds();
325-
element.getPath().forEach((point) => {
326-
bounds.extend(point);
327-
});
328-
infoWindow.setPosition(bounds.getCenter());
329-
infoWindow.open({ map: this.map, anchor: element });
330319
}
320+
infoWindow.open({ map: this.map, anchor: element });
321+
});
322+
if (opened) {
323+
if (autoClose) {
324+
this.closeInfoWindowsExcept(infoWindow);
325+
}
326+
infoWindow.open({ map: this.map, anchor: element });
331327
}
332328
return infoWindow;
333329
}

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

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -296,45 +296,53 @@ export default class extends AbstractMapController<
296296
element,
297297
}: {
298298
definition: InfoWindowWithoutPositionDefinition<google.maps.InfoWindowOptions>;
299-
element: google.maps.marker.AdvancedMarkerElement | google.maps.Polygon | google.maps.Polyline;
299+
element: google.maps.marker.AdvancedMarkerElement | google.maps.Polygon | google.maps.Polyline | google.maps.Circle | google.maps.Rectangle;
300300
}): google.maps.InfoWindow {
301-
const { headerContent, content, extra, rawOptions = {}, ...otherOptions } = definition;
301+
const { headerContent, content, opened, autoClose, rawOptions = {} } = definition;
302+
303+
let position: google.maps.LatLng | null = null;
304+
if (element instanceof google.maps.Circle) {
305+
position = element.getCenter();
306+
} else if (element instanceof google.maps.Rectangle) {
307+
position = element.getBounds()?.getCenter() || null;
308+
} else if (element instanceof google.maps.Polygon || element instanceof google.maps.Polyline) {
309+
// Note: We do not compute the center of Polygons or Polylines here, since shapes can be complex.
310+
// Instead, listen to the `ux:map:polygon:before-create` or `ux:map:polyline:before-create` events to set the position manually.
311+
// ```js
312+
// const bounds = new google.maps.LatLngBounds();
313+
// element.getPath().forEach((latLng) => bounds.extend(latLng));
314+
// event.definition.infoWindow.rawOptions.position = bounds.getCenter();
315+
// ```
316+
}
302317

303-
const infoWindow = new _google.maps.InfoWindow({
318+
const infoWindowOptions: google.maps.InfoWindowOptions = {
304319
headerContent: this.createTextOrElement(headerContent),
305320
content: this.createTextOrElement(content),
306-
...otherOptions,
321+
position,
307322
...rawOptions,
308-
});
323+
};
309324

310-
if (element instanceof google.maps.marker.AdvancedMarkerElement) {
311-
element.addListener('click', () => {
312-
if (definition.autoClose) {
313-
this.closeInfoWindowsExcept(infoWindow);
314-
}
315-
infoWindow.open({ map: this.map, anchor: element });
316-
});
325+
const infoWindow = new _google.maps.InfoWindow(infoWindowOptions);
317326

318-
if (definition.opened) {
319-
infoWindow.open({ map: this.map, anchor: element });
327+
element.addListener('click', (event: google.maps.MapMouseEvent) => {
328+
if (autoClose) {
329+
this.closeInfoWindowsExcept(infoWindow);
320330
}
321-
} else if (element instanceof google.maps.Polygon) {
322-
element.addListener('click', (event: any) => {
323-
if (definition.autoClose) {
324-
this.closeInfoWindowsExcept(infoWindow);
325-
}
331+
332+
// Don't override the position if it was already set (e.g. through "rawOptions")
333+
if (infoWindowOptions.position === null) {
326334
infoWindow.setPosition(event.latLng);
327-
infoWindow.open(this.map);
328-
});
329-
330-
if (definition.opened) {
331-
const bounds = new google.maps.LatLngBounds();
332-
element.getPath().forEach((point: google.maps.LatLng) => {
333-
bounds.extend(point);
334-
});
335-
infoWindow.setPosition(bounds.getCenter());
336-
infoWindow.open({ map: this.map, anchor: element });
337335
}
336+
337+
infoWindow.open({ map: this.map, anchor: element });
338+
});
339+
340+
if (opened) {
341+
if (autoClose) {
342+
this.closeInfoWindowsExcept(infoWindow);
343+
}
344+
345+
infoWindow.open({ map: this.map, anchor: element });
338346
}
339347

340348
return infoWindow;

0 commit comments

Comments
 (0)