diff options
| -rw-r--r-- | src/client/views/collections/MapView/CollectionMapView.tsx | 45 |
1 files changed, 23 insertions, 22 deletions
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 > |