fix link to map; ownerdocument error

1 files changed, 99 insertions, 107 deletions

diff --git a/src/client/views/collections/MapView/CollectionMapView.tsx b/src/client/views/collections/MapView/CollectionMapView.tsx
index 42059b61c..4243b89a5 100644
--- a/src/client/views/collections/MapView/CollectionMapView.tsx
+++ b/src/client/views/collections/MapView/CollectionMapView.tsx
@@ -1,4 +1,4 @@
-import { GoogleMap, Marker, InfoWindow, InfoBox, LoadScript, GoogleMapProps, StandaloneSearchBox, DrawingManager } from '@react-google-maps/api';
+import { GoogleMap, Marker, InfoWindow, InfoBox, useJsApiLoader, LoadScript, GoogleMapProps, StandaloneSearchBox, DrawingManager } from '@react-google-maps/api';
 import { observable, action, computed, Lambda, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast, Field, FieldResult, Opt } from "../../../../fields/Doc";
@@ -35,6 +35,7 @@ const defaultCenter = {
 @observer
 export default class CollectionMapView extends CollectionSubView<MapSchema, GoogleMapProps>(MapSchema) {
 
+    @observable private _map = null as any
     @observable private mapRef = null as any;
     @observable private selectedPlace: LocationData = { id: undefined, pos: undefined };
     @observable private markerMap = {};
@@ -42,6 +43,10 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
     @observable private zoom = 2.5;
     @observable private clickedLatLng = null;
     @observable private infoWindowOpen = false;
+    @observable private bounds = new window.google.maps.LatLngBounds();
+    @observable private inputRef = React.createRef<HTMLInputElement>();
+    @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!);
+    @observable private searchMarkers: google.maps.Marker[] = [];
 
     @observable private myPlaces = [
         { id: 1, pos: { lat: 39.09366509575983, lng: -94.58751660204751 } },
@@ -50,15 +55,19 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
         { id: 4, pos: { lat: 36.7783, lng: 119.4179 } }
     ];
 
+    @action
+    private setSearchBox = (searchBox: any) => {
+        this.searchBox = searchBox;
+    }
+
     // iterate myPlaces to size, center, and zoom map to contain all markers
     private fitBounds = (map: any) => {
-        const bounds = new window.google.maps.LatLngBounds();
-        console.log('map bound is:' + bounds);
+        console.log('map bound is:' + this.bounds);
         this.myPlaces.map(place => {
-            bounds.extend(place.pos);
+            this.bounds.extend(place.pos);
             return place.id;
         });
-        map.fitBounds(bounds)
+        map.fitBounds(this.bounds)
     }
 
     // store a reference to google map instance; fit map bounds to contain all markers
@@ -125,31 +134,9 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
         }
     }
 
-    /**
-     * func that handles user's search location and zoom/pan on the input location
-     */
-    private searchLocation = () => {
-
-    }
-
-    /**
-     * func that adds marker to google maps
-     */
-    @undoBatch
-    private addMarker = () => {
-
-    }
-
-    /**
-     * func that updates suggested results (and auto-complete) during user input
-     */
-    private handleChange = () => {
-
-    }
-
     // private mapRef = document.getElementById("map")
     // private markers: google.maps.Marker[] = [];
-    @observable private inputRef = React.createRef<HTMLInputElement>();
+
 
     // @action
     // private setInputRef = (element: HTMLInputElement) => {
@@ -159,8 +146,9 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
     //     }
     // }
 
-    @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!);
+    // @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!);
 
+    @action
     private handlePlacesChanged = () => {
         console.log(this.searchBox);
         const places = this.searchBox.getPlaces();
@@ -169,49 +157,51 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
 
         if (places.length == 0) { return; }
 
-        // // clear out old markers
-        // this.markers.forEach((marker) => {
-        //     marker.setMap(null);
-        // });
-        // this.markers = []
+        // clear out old markers
+        this.searchMarkers.forEach((marker) => {
+            marker.setMap(null);
+        });
+        this.searchMarkers = []
 
-        // // for each place, get icon, name, location
-        const bounds = new window.google.maps.LatLngBounds();
+        // for each place, get icon, name, location
         places.forEach((place) => {
             if (!place.geometry || !place.geometry.location) {
                 console.log("Returned place contains no geometry");
                 return;
             }
 
-            // const icon = {
-            //     url: place.icon as string,
-            //     size: new google.maps.Size(71, 71),
-            //     origin: new google.maps.Point(0, 0),
-            //     anchor: new google.maps.Point(17, 34),
-            //     scaledSize: new google.maps.Size(25, 25),
-            // }
-
-            // //create a marker for each place
-            // this.markers.push(
-            //     new google.maps.Marker({
-            //         mapRef, 
-            //         title: place.name,
-            //         position: place.geometry.location,
-            //     })
-            // );
+            const icon = {
+                url: place.icon as string,
+                size: new google.maps.Size(71, 71),
+                origin: new google.maps.Point(0, 0),
+                anchor: new google.maps.Point(17, 34),
+                scaledSize: new google.maps.Size(25, 25),
+            }
+
+            //create a marker for each place
+            this.searchMarkers.push(
+                new google.maps.Marker({
+                    map: this._map,
+                    icon: icon,
+                    title: place.name,
+                    position: place.geometry.location,
+                })
+            );
 
             if (place.geometry.viewport) {
                 // only geocodes have viewport
-                bounds.union(place.geometry.viewport);
+                this.bounds.union(place.geometry.viewport);
             }
             else {
-                bounds.extend(place.geometry.location);
+                this.bounds.extend(place.geometry.location);
             }
         });
+
+        console.log(this.searchMarkers);
     }
 
     private onBoundsChanged = () => {
-        this.searchBox.setBounds(this.mapRef.getBounds())
+        this.searchBox.setBounds(this.bounds);
     }
 
     private onCenterChanged = () => {
@@ -250,62 +240,64 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
                 style={{ pointerEvents: active() ? undefined : "none", overflow: 'hidden' }}
                 onWheel={e => e.stopPropagation()}
                 onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} >
-                <LoadScript
+                {/* <LoadScript
                     googleMapsApiKey={process.env.GOOGLE_MAPS!}
                     libraries={['places', 'drawing']}
-                >
-                    <div className="map-wrapper">
-                        <GoogleMap
-                            mapContainerStyle={mapContainerStyle}
-                            zoom={this.zoom}
-                            center={this.center}
-                            onLoad={map => this.loadHandler(map)}
-                            onBoundsChanged={this.onBoundsChanged}
-                            onCenterChanged={this.onCenterChanged}
-                        >
-                            <StandaloneSearchBox
-                                onPlacesChanged={this.handlePlacesChanged}>
-                                <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" />
-                            </StandaloneSearchBox>
-
-                            {this.myPlaces.map(place => (
-                                <Marker
-                                    key={place.id}
-                                    position={place.pos}
-                                    // onLoad={marker => this.markerLoadHandler(marker, place)}
-                                    onClick={e => this.markerClickHandler(e, place)}
-                                    draggable={true}
-                                    onDragEnd={marker => this.handleDragMarker(marker, place)}
-                                />
-                            ))}
-                            {this.infoWindowOpen && this.selectedPlace && (
-                                <InfoWindow
-                                    // anchor={this.markerMap[this.selectedPlace.id]}
-                                    onCloseClick={this.handleInfoWindowClose}
-                                    position={this.selectedPlace.pos}
-                                // options={{ enableEventPropagation: true }}
-                                >
-                                    <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
-                                        <div style={{ fontSize: 16 }}>
-                                            <div>
-                                                <a>a link to another node</a>
-                                            </div>
-                                            <div>
-                                                <a>a link to another node</a>
-                                            </div>
-                                            <div>
-                                                <a>a link to another node</a>
-                                            </div>
-                                            <div>
-                                                <button>New +</button>
-                                            </div>
+                > */}
+                <div className="map-wrapper">
+                    <GoogleMap
+                        ref={(map) => this._map = map}
+                        mapContainerStyle={mapContainerStyle}
+                        zoom={this.zoom}
+                        center={this.center}
+                        onLoad={map => this.loadHandler(map)}
+                        onBoundsChanged={this.onBoundsChanged}
+                        onCenterChanged={this.onCenterChanged}
+                    >
+                        <StandaloneSearchBox
+                            onLoad={this.setSearchBox}
+                            onPlacesChanged={this.handlePlacesChanged}>
+                            <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" />
+                        </StandaloneSearchBox>
+
+                        {this.myPlaces.map(place => (
+                            <Marker
+                                key={place.id}
+                                position={place.pos}
+                                // onLoad={marker => this.markerLoadHandler(marker, place)}
+                                onClick={e => this.markerClickHandler(e, place)}
+                                draggable={true}
+                                onDragEnd={marker => this.handleDragMarker(marker, place)}
+                            />
+                        ))}
+                        {this.infoWindowOpen && this.selectedPlace && (
+                            <InfoWindow
+                                // anchor={this.markerMap[this.selectedPlace.id]}
+                                onCloseClick={this.handleInfoWindowClose}
+                                position={this.selectedPlace.pos}
+                            // options={{ enableEventPropagation: true }}
+                            >
+                                <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
+                                    <div style={{ fontSize: 16 }}>
+                                        <div>
+                                            <a>a link to another node</a>
+                                        </div>
+                                        <div>
+                                            <a>a link to another node</a>
+                                        </div>
+                                        <div>
+                                            <a>a link to another node</a>
+                                        </div>
+                                        <div>
+                                            <button>New +</button>
                                         </div>
                                     </div>
-                                </InfoWindow>
-                            )}
-                        </GoogleMap>
-                    </div>
-                </LoadScript >
+                                </div>
+                            </InfoWindow>
+                        )}
+                    </GoogleMap>
+                </div>
+                {/* </LoadScript > */}
             </div >
         </div >;
     }