From 47cbef2af2c920ba3103a1038cb05f623c6c14e4 Mon Sep 17 00:00:00 2001
From: Andy Balaam <andyb@element.io>
Date: Tue, 18 Jan 2022 13:33:53 +0000
Subject: [PATCH] Ensure maps show up in replies and threads, by creating
 unique IDs (#7568)

---
 .../views/messages/MLocationBody.tsx          | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/views/messages/MLocationBody.tsx b/src/components/views/messages/MLocationBody.tsx
index 9ed1e22fa4..a54aa8a1f1 100644
--- a/src/components/views/messages/MLocationBody.tsx
+++ b/src/components/views/messages/MLocationBody.tsx
@@ -38,11 +38,18 @@ interface IState {
 @replaceableComponent("views.messages.MLocationBody")
 export default class MLocationBody extends React.Component<IBodyProps, IState> {
     private coords: GeolocationCoordinates;
+    private bodyId: string;
+    private markerId: string;
 
     constructor(props: IBodyProps) {
         super(props);
 
+        const randomString = Math.random().toString(16).slice(2, 10);
+        const idSuffix = `${props.mxEvent.getId()}_${randomString}`;
+        this.bodyId = `mx_MLocationBody_${idSuffix}`;
+        this.markerId = `mx_MLocationBody_marker_${idSuffix}`;
         this.coords = parseGeoUri(locationEventGeoUri(this.props.mxEvent));
+
         this.state = {
             error: undefined,
         };
@@ -56,20 +63,12 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         createMap(
             this.coords,
             false,
-            this.getBodyId(),
-            this.getMarkerId(),
+            this.bodyId,
+            this.markerId,
             (e: Error) => this.setState({ error: e }),
         );
     }
 
-    private getBodyId = () => {
-        return `mx_MLocationBody_${this.props.mxEvent.getId()}`;
-    };
-
-    private getMarkerId = () => {
-        return `mx_MLocationBody_marker_${this.props.mxEvent.getId()}`;
-    };
-
     private onClick = (
         event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     ) => {
@@ -93,8 +92,8 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
     render(): React.ReactElement<HTMLDivElement> {
         return <LocationBodyContent
             mxEvent={this.props.mxEvent}
-            bodyId={this.getBodyId()}
-            markerId={this.getMarkerId()}
+            bodyId={this.bodyId}
+            markerId={this.markerId}
             error={this.state.error}
             tooltip={_t("Expand map")}
             onClick={this.onClick}