merge

Author: christophermcintosh

GoogleMap.jsx

@@ -37,27 +37,28 @@ class GoogleMap extends Component {
 
   onChange = (e) => {
     e.preventDefault()
-    if (e.target.name === 'title'){
-      title = e.target.value}
-    else if (e.target.name === 'tags'){
+    if (e.target.name === 'title') {
+      title = e.target.value
+    }
+    else if (e.target.name === 'tags') {
       tags = e.target.value
-    }  
+    }
   }
 
   onCreateClick(e) {
     e.preventDefault()
-    this.setState({openNewForm: !this.state.openNewForm})
+    this.setState({ openNewForm: !this.state.openNewForm })
   }
 
   mapInput(event) {
     event.preventDefault();
-  }  
+  }
 
   createNewMap() {
     let center = {
       lat: this.map.getCenter().lat(),
       lng: this.map.getCenter().lng()
-    };   
+    };
 
     db.collection('maps').add({
       center: this.state.center,
@@ -81,10 +82,10 @@ class GoogleMap extends Component {
     geocode({ address: input.value }, function (results, status) {
       if (status === google.maps.GeocoderStatus.OK) {
         const center = {
-        lat: results[0].geometry.location.lat(),
-        lng: results[0].geometry.location.lng()
+          lat: results[0].geometry.location.lat(),
+          lng: results[0].geometry.location.lng()
         }
-        holder.setState({center});
+        holder.setState({ center });
         holder.map.setCenter(center);
         holder.map.setZoom(15);
       } else {
@@ -107,14 +108,14 @@ class GoogleMap extends Component {
   }
 
   loadMap() {
-    if (this.props && this.props.google) { 
+    if (this.props && this.props.google) {
       const { google } = this.props;
       const maps = google.maps;
       const mapRef = this.refs.map;
       const node = ReactDOM.findDOMNode(mapRef);
       let defaultCenter;
       let zoom;
- 
+
       if (this.state.center.lat) {
         defaultCenter = this.state.center;
         zoom = 15;
@@ -138,7 +139,7 @@ class GoogleMap extends Component {
       const input = document.getElementById('center-point'); // use a ref instead
       const options = {
         bounds: defaultBounds,
-       // types: ['establishment']
+        // types: ['establishment']
       };
       const autocomplete = new google.maps.places.Autocomplete(input, options);
     }
@@ -148,15 +149,15 @@ class GoogleMap extends Component {
     const { classes } = this.props;
     const { openNewForm, centerMap } = this.state;
 
-    const style = { 
+    const style = {
       width: '100vw',
       height: '100vh'
     };
 
     return (
       <div>
-       
-          { (!openNewForm) && 
+
+          { (!openNewForm) &&
             <div className="google-map-buttons text-align-center">
             <input id='center-point' className='controls google-map-input' type='text' placeholder='Search Locations' />
           <Button variant="raised" color="primary" className={classes.button} onClick={this.onSearchClick}>Center Map</Button>
@@ -165,14 +166,14 @@ class GoogleMap extends Component {
           }
           </div>
           }
-       
+
         { (openNewForm) &&
           <div className="google-map-buttons-2 text-align-center">
           <form onSubmit={this.onSubmitMapInfo} onChange = {this.onChange}>
             <input name="title" className="google-map-input google-input-margin" placeholder="New Map Name" required />
             <input name="tags" className="google-map-input google-input-margin" placeholder="Enter Hashtags" required />
             <Button variant="raised" color="primary" className={classes.button} type="submit" >Submit</Button>
-          </form>  
+          </form>
             <Button variant="raised" color="primary" className={classes.button} type="text" onClick={this.onCreateClick}>Back</Button>
           </div>
         }

NewMap.jsx

@@ -2,17 +2,16 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import firebase from '~/fire';
 import { withRouter } from "react-router-dom";
-import ResultList from './ResultList'
-import GoogleMapButton from './GoogleMapButton';
+//import ResultList from './ResultList'
 
 const db = firebase.firestore();
 
 var searchMarkersArray = [];
 var addedMarkersArr = [];
-
 function clearOverlays(arr) {
   for (var i = 0; i < arr.length; i++) {
     arr[i].setMap(null);
+
   }
   arr.length = 0;
 }
@@ -42,7 +41,6 @@ class NewMap extends Component {
     marker.id = place.place_id
     addedMarkersArr.push(marker)
     marker.setMap(null)
-    console.log(place);
     obj[place.place_id] = {
       lat: place.geometry.location.lat(),
       lng: place.geometry.location.lng(),
@@ -90,8 +88,9 @@ class NewMap extends Component {
 
   onClick = (event) => {
     event.preventDefault()
+    var placeArr = []
     if (searchMarkersArray.length) {
-      clearOverlays()
+      clearOverlays(searchMarkersArray)
     }
 
     const { google } = this.props
@@ -101,7 +100,7 @@ class NewMap extends Component {
 
     var request = {
       location: center,
-      radius: '1000',
+      bounds: this.map.getBounds(),
       name: event.target.search.value
     }
     var infowindow = new google.maps.InfoWindow();
@@ -127,10 +126,11 @@ class NewMap extends Component {
                   position: place.geometry.location
                 });
                 searchMarkersArray.push(marker)
+                placeArr.push(place)
                 google.maps.event.addListener(marker, 'click', function () {
                   infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
                     'Place ID: ' + place.place_id + '<br>' +
-                    place.formatted_address + '<div class="text-align-center"><button id="addPlaceButton">Add Place</button></div></div> ');
+                    place.formatted_address + '<button id="addPlaceButton">Add Place</button></div ');
                   infowindow.open(holder.map, this);
                   const getButton = document.getElementById('addPlaceButton');
                   getButton.addEventListener('click', () => { holder.addPlace(marker, place, infowindow) })
@@ -142,7 +142,9 @@ class NewMap extends Component {
       }
       else { console.log('no results') }
     }
-    service.nearbySearch(request, callback);
+
+
+    service.nearbySearch(request, callback)
   }
 
   componentDidMount() {
@@ -170,15 +172,16 @@ class NewMap extends Component {
         this.map = new maps.Map(node, mapConfig)
         var isthis = this
         const service1 = new this.props.google.maps.places.PlacesService(this.map);
-        const defaultBounds = new google.maps.LatLngBounds(
-          new google.maps.LatLng(-33.8902, 151.1759),
-          new google.maps.LatLng(-33.8474, 151.2631)
-        );
+        let options = {
+          bounds: this.map.getBounds(),
+        }
         const input = document.getElementById('center'); // use a ref instead
-        const options = {
-          bounds: defaultBounds,
-        };
-        const autocomplete = new google.maps.places.Autocomplete(input, options);
+
+        const autocomplete = new google.maps.places.Autocomplete(input, options)
+
+        google.maps.event.addListener(this.map, 'idle', function () {
+          autocomplete.setBounds(isthis.map.getBounds())
+        });
         var checkedMap = db.collection('maps').doc(this.props.match.params.id).onSnapshot(function (doc) {
           var infowindow = new google.maps.InfoWindow();
 
@@ -190,7 +193,7 @@ class NewMap extends Component {
             (() => {
               var latLng = { lat: arr[keysArr[i]].lat, lng: arr[keysArr[i]].lng }
               var placeName = keysArr[i]
-              var placeInfo=arr[placeName];
+              var placeInfo = arr[placeName];
               var marker = new google.maps.Marker({
                 map: isthis.map,
                 position: latLng,
@@ -200,7 +203,7 @@ class NewMap extends Component {
               addedMarkersArr.push(marker)
               google.maps.event.addListener(marker, 'click', function () {
                 infowindow.setContent('<div><strong>Work in Progress</strong><br>' +
-                  'Place:' + placeInfo.name + 'Address' + placeInfo.address + '<br><div class="text-align-center"><button id="removePlaceButton">Remove Place</div></div> ');
+                  'Place:' + placeInfo.name + 'Address' + placeInfo.address + '<br><button id="removePlaceButton">Remove Place</div ');
                 infowindow.open(isthis.map, this);
                 const getButton = document.getElementById('removePlaceButton');
                 getButton.addEventListener('click', () => { isthis.removePlace(marker) })
@@ -213,30 +216,19 @@ class NewMap extends Component {
 
   render() {
     const style = {
-      width: '100vw',
-      height: '100vh'
+      width: '90vw',
+      height: '75vh'
     };
-
     return (
       <div>
-        <div className="google-map-buttons text-align-center">
-          <form onSubmit={this.onClick}>
-            <input ref="center" id="center" className="google-map-input google-input-margin" type="text" placeholder="Search For A Place" name="search" />
-            {
-
-            }
-            <GoogleMapButton type={`submit`} text={`Add to map`} />
-            {
-
-            <GoogleMapButton onClick={this.clearSearch} text={`Clear Search`} />
-            }
-          </form>
-          
-        </div>
-        <div ref="newmap" className="google-map">
+        <div ref="newmap" style={style}>
           Loading map...
         </div>
-        
+        <form onSubmit={this.onClick}>
+          <input ref='center' id='center' className='controls' type='text' placeholder='search for place' name='search' />
+          <button type='submit' />
+        </form>
+        <button onClick={this.clearSearch}>Clear Search </button>
       </div>
     )
   }

ResultList.jsx

@@ -9,43 +9,29 @@ export default class ResultList extends Component {
   constructor(props){
     super(props)
     this.state = {results: []}
-    this.onClick = this.onClick.bind(this)
   }
-  onClick(event){
-    event.preventDefault()
-    var placeId = event.target.placeid.value
-    var id = this.props.id
-    var obj = {}
-    obj[placeId] = true
-    var mapRef = db.collection('maps').doc(id);
-    var getDoc = mapRef.set({
-      places: obj
-  }, { merge: true })
-    .then(doc => {
-        if (!doc.exists) {
-            console.log('No such document!');
-        } else {
-            console.log('Document data:', doc.data());
-        }
-    })
-    .catch(err => {
-        console.log('Error getting document', err);
-    });
+  componentWillReceiveProps(){
+    console.log(this.props.arr.arr, this.props.arr.length)
+        this.setState({results:this.props.arr})
+
 
   }
+
   componentDidMount(){
     console.log(this.props)
-    this.setState({results:this.props.results})
-    console.log(this.state)
+    //this.setState({results:this.props.arr})
   }
 
   render(){
-    var key = 0
-    console.log(this.state.results)
+    //console.log(this.props.arr[0])
+    console.log(this.state)
+
     return(
-      <ul>{this.state.results && this.state.results.map(result =>{
-        return <form key={key++} onSubmit = {this.onClick}><option   type = 'submit'>{result.name}</option><button name='placeid' type='submit' value={result.place_id}>add to map</button></form>
-      })}</ul>    )
+      this.state.results.length ? this.state.results.map((place)=>{
+        return <div>{place.name}</div>
+      })
+      :  <div>no results </div>
+    )
   }
 
 }