From 5f3486d68dd6a6c2b13acf7127188220a4012290 Mon Sep 17 00:00:00 2001 From: Aubrey-Li <63608597+Aubrey-Li@users.noreply.github.com> Date: Tue, 6 Jul 2021 19:50:08 -0700 Subject: fix link to map; ownerdocument error --- .../collections/MapView/CollectionMapView.tsx | 206 ++++++++++----------- 1 file changed, 99 insertions(+), 107 deletions(-) (limited to 'src') 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) { + @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(); + @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 { + 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 { - - } - - /** - * 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(); + // @action // private setInputRef = (element: HTMLInputElement) => { @@ -159,8 +146,9 @@ export default class CollectionMapView extends CollectionSubView { console.log(this.searchBox); const places = this.searchBox.getPlaces(); @@ -169,49 +157,51 @@ export default class CollectionMapView extends CollectionSubView { - // 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 e.stopPropagation()} onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} > - -
- this.loadHandler(map)} - onBoundsChanged={this.onBoundsChanged} - onCenterChanged={this.onCenterChanged} - > - - - - - {this.myPlaces.map(place => ( - this.markerLoadHandler(marker, place)} - onClick={e => this.markerClickHandler(e, place)} - draggable={true} - onDragEnd={marker => this.handleDragMarker(marker, place)} - /> - ))} - {this.infoWindowOpen && this.selectedPlace && ( - -
-
- - - -
- -
+ > */} +
+ this._map = map} + mapContainerStyle={mapContainerStyle} + zoom={this.zoom} + center={this.center} + onLoad={map => this.loadHandler(map)} + onBoundsChanged={this.onBoundsChanged} + onCenterChanged={this.onCenterChanged} + > + + + + + {this.myPlaces.map(place => ( + this.markerLoadHandler(marker, place)} + onClick={e => this.markerClickHandler(e, place)} + draggable={true} + onDragEnd={marker => this.handleDragMarker(marker, place)} + /> + ))} + {this.infoWindowOpen && this.selectedPlace && ( + +
+ - - )} - -
- +
+ + )} + +
+ {/* */}
; } -- cgit v1.2.3-70-g09d2