Skip to content

Search fixes #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 26, 2018
Merged

Search fixes #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
92bbb65
?
djxr35 Mar 26, 2018
c53850a
?
djxr35 Mar 26, 2018
0749ce3
fixed search bounds
djxr35 Mar 26, 2018
f6d4525
?
djxr35 Mar 26, 2018
68a0627
Merge branch 'master' of https://github.com/FSACapstone/MapIt into se…
djxr35 Mar 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 19 additions & 18 deletions GoogleMap.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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);
}
Expand All @@ -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>
Expand All @@ -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>
}
Expand Down
66 changes: 29 additions & 37 deletions NewMap.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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(),
Expand Down Expand Up @@ -90,8 +88,9 @@ class NewMap extends Component {

onClick = (event) => {
event.preventDefault()
var placeArr = []
if (searchMarkersArray.length) {
clearOverlays()
clearOverlays(searchMarkersArray)
}

const { google } = this.props
Expand All @@ -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();
Expand All @@ -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) })
Expand All @@ -142,7 +142,9 @@ class NewMap extends Component {
}
else { console.log('no results') }
}
service.nearbySearch(request, callback);


service.nearbySearch(request, callback)
}

componentDidMount() {
Expand Down Expand Up @@ -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();

Expand All @@ -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,
Expand All @@ -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) })
Expand All @@ -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>
)
}
Expand Down
42 changes: 14 additions & 28 deletions ResultList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}

}