From 75c84cbba7f64a01e086e6c0803b8504a06a787c Mon Sep 17 00:00:00 2001
From: vicky-primathon <67091118+vicky-primathon@users.noreply.github.com>
Date: Thu, 29 Oct 2020 23:46:27 +0530
Subject: [PATCH] Map resetting when clicking on a marker fix (#1299)

---
 .../designSystems/appsmith/MapComponent.tsx   | 126 ++++++++++--------
 1 file changed, 72 insertions(+), 54 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/MapComponent.tsx b/app/client/src/components/designSystems/appsmith/MapComponent.tsx
index 80fa6067b6..09282d6df8 100644
--- a/app/client/src/components/designSystems/appsmith/MapComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/MapComponent.tsx
@@ -73,62 +73,80 @@ const PickMyLocationWrapper = styled.div<PickMyLocationProps>`
 `;
 
 const MyMapComponent = withScriptjs(
-  withGoogleMap((props: any) => (
-    <GoogleMap
-      options={{
-        zoomControl: props.allowZoom,
-        fullscreenControl: false,
-        mapTypeControl: false,
-        scrollwheel: false,
-        rotateControl: false,
-        streetViewControl: false,
-      }}
-      zoom={props.zoom}
-      center={{ ...props.center, lng: props.center.long }}
-      onClick={e => {
-        if (props.enableCreateMarker) {
-          props.saveMarker(e.latLng.lat(), e.latLng.lng());
+  withGoogleMap((props: any) => {
+    const [mapCenter, setMapCenter] = React.useState<
+      | {
+          lat: number;
+          lng: number;
+          title?: string;
+          description?: string;
         }
-      }}
-    >
-      {props.enableSearch && (
-        <SearchBox
-          controlPosition={2}
-          onPlacesChanged={props.onPlacesChanged}
-          ref={props.onSearchBoxMounted}
-        >
-          <StyledInput type="text" placeholder="Enter location to search" />
-        </SearchBox>
-      )}
-      {props.markers.map((marker: any, index: number) => (
-        <Marker
-          key={index}
-          title={marker.title}
-          position={{ lat: marker.lat, lng: marker.long }}
-          clickable
-          draggable={
-            props.selectedMarker &&
-            props.selectedMarker.lat === marker.lat &&
-            props.selectedMarker.long === marker.long
+      | undefined
+    >({
+      ...props.center,
+      lng: props.center.long,
+    });
+    return (
+      <GoogleMap
+        options={{
+          zoomControl: props.allowZoom,
+          fullscreenControl: false,
+          mapTypeControl: false,
+          scrollwheel: false,
+          rotateControl: false,
+          streetViewControl: false,
+        }}
+        zoom={props.zoom}
+        center={mapCenter}
+        onClick={e => {
+          if (props.enableCreateMarker) {
+            props.saveMarker(e.latLng.lat(), e.latLng.lng());
           }
-          onClick={e => {
-            props.selectMarker(marker.lat, marker.long, marker.title);
-          }}
-          onDragEnd={de => {
-            props.updateMarker(de.latLng.lat(), de.latLng.lng(), index);
-          }}
-        />
-      ))}
-      {props.enablePickLocation && (
-        <PickMyLocationWrapper
-          title="Pick My Location"
-          allowZoom={props.allowZoom}
-        >
-          <PickMyLocation updateCenter={props.updateCenter} />
-        </PickMyLocationWrapper>
-      )}
-    </GoogleMap>
-  )),
+        }}
+      >
+        {props.enableSearch && (
+          <SearchBox
+            controlPosition={2}
+            onPlacesChanged={props.onPlacesChanged}
+            ref={props.onSearchBoxMounted}
+          >
+            <StyledInput type="text" placeholder="Enter location to search" />
+          </SearchBox>
+        )}
+        {props.markers.map((marker: any, index: number) => (
+          <Marker
+            key={index}
+            title={marker.title}
+            position={{ lat: marker.lat, lng: marker.long }}
+            clickable
+            draggable={
+              props.selectedMarker &&
+              props.selectedMarker.lat === marker.lat &&
+              props.selectedMarker.long === marker.long
+            }
+            onClick={e => {
+              setMapCenter({
+                ...marker,
+                lng: marker.long,
+              });
+              props.selectMarker(marker.lat, marker.long, marker.title);
+            }}
+            onDragEnd={de => {
+              props.updateMarker(de.latLng.lat(), de.latLng.lng(), index);
+            }}
+          />
+        ))}
+        {props.enablePickLocation && (
+          <PickMyLocationWrapper
+            title="Pick My Location"
+            allowZoom={props.allowZoom}
+          >
+            <PickMyLocation updateCenter={props.updateCenter} />
+          </PickMyLocationWrapper>
+        )}
+      </GoogleMap>
+    );
+  }),
 );
 
 class MapComponent extends React.Component<MapComponentProps> {