From 89ae6933ed13209497151c6a09bc88f600c53a57 Mon Sep 17 00:00:00 2001
From: Aubrey-Li <63608597+Aubrey-Li@users.noreply.github.com>
Date: Mon, 5 Jul 2021 16:40:34 -0700
Subject: zoom & pan onSearch

---
 .../collections/MapView/CollectionMapView.tsx      | 45 +++++++++++-----------
 1 file changed, 23 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/MapView/CollectionMapView.tsx b/src/client/views/collections/MapView/CollectionMapView.tsx
index b3a5bdbff..42059b61c 100644
--- a/src/client/views/collections/MapView/CollectionMapView.tsx
+++ b/src/client/views/collections/MapView/CollectionMapView.tsx
@@ -149,18 +149,21 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
 
     // private mapRef = document.getElementById("map")
     // private markers: google.maps.Marker[] = [];
-    @observable private input: HTMLInputElement | undefined;
+    @observable private inputRef = React.createRef<HTMLInputElement>();
 
-    @action
-    private setInputRef = (element: HTMLInputElement) => {
-        this.input = element;
-        console.log("htmlinputelement is:" + this.input)
-    }
-    // private searchBox = new window.google.maps.places.SearchBox(this.input);
+    // @action
+    // private setInputRef = (element: HTMLInputElement) => {
+    //     if (this.inputRef.current) {
+    //         this.inputRef! = element;
+    //         console.log("htmlinputelement is:" + this.inputRef)
+    //     }
+    // }
+
+    @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!);
 
     private handlePlacesChanged = () => {
-        const searchBox = new window.google.maps.places.SearchBox(this.input!)
-        const places = searchBox.getPlaces();
+        console.log(this.searchBox);
+        const places = this.searchBox.getPlaces();
 
         console.log(places);
 
@@ -207,6 +210,14 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
         });
     }
 
+    private onBoundsChanged = () => {
+        this.searchBox.setBounds(this.mapRef.getBounds())
+    }
+
+    private onCenterChanged = () => {
+
+    }
+
     // private setBounds = () => {
     //     const places = this.searchBox.getPlaces();
     //     if (places.length == 0) { return; }
@@ -230,14 +241,6 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
     //     return bounds
     // }
 
-    private onPolygonComplete = (polygon: any) => {
-        console.log(polygon)
-    }
-
-    private onMarkerComplete = (marker: any) => {
-        this.myPlaces.push(marker)
-    }
-
     render() {
         const { Document, fieldKey, isContentActive: active } = this.props;
 
@@ -257,10 +260,12 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
                             zoom={this.zoom}
                             center={this.center}
                             onLoad={map => this.loadHandler(map)}
+                            onBoundsChanged={this.onBoundsChanged}
+                            onCenterChanged={this.onCenterChanged}
                         >
                             <StandaloneSearchBox
                                 onPlacesChanged={this.handlePlacesChanged}>
-                                <input ref={this.setInputRef} className="searchbox" type="text" placeholder="Search anywhere:" />
+                                <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" />
                             </StandaloneSearchBox>
 
                             {this.myPlaces.map(place => (
@@ -298,10 +303,6 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
                                     </div>
                                 </InfoWindow>
                             )}
-                            {/* <DrawingManager
-                                onPolygonComplete={this.onPolygonComplete}
-                                onMarkerComplete={this.onMarkerComplete}
-                            /> */}
                         </GoogleMap>
                     </div>
                 </LoadScript >
-- 
cgit v1.2.3-70-g09d2