ydeshayes/googleplaceautocomplete

Wrapper on top of the material-ui AutoComplete component that use google place api

googleplaceautocomplete's Issues

Sold. I'm in.

in.

maybe referencing material-ui in the npm package could be good (for marketing purposes).

material-ui-googleplaces
material-ui-places

also maybe worth checking out (for roadmap purposes):

https://github.com/ubilabs/react-geosuggest
mui/material-ui#5235

Moving to latest React verison ?

Thanks for this useful package

Currently I'm having this warning

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Do you want to bump to latest version of your dependencies ?

Thanks

Npm version has no lib

The version 1.0.3 in npm has no lib directory. I tried uploading a screenshot of the installed package but at the time of writing ec2 is having a downtime so github images servers are down

Material UI next version

Here is a modified version for the new version of Material UI based on
this example

Might be useful.

import React from 'react';
import PropTypes from 'prop-types';
import Autosuggest from 'react-autosuggest';
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import TextField from 'material-ui/TextField';
import Paper from 'material-ui/Paper';
import { MenuItem } from 'material-ui/Menu';
import { withStyles } from 'material-ui/styles';

function renderInput(inputProps) {
  const { classes, autoFocus, value, ref, ...other } = inputProps;

  return (
      <TextField
          autoFocus={autoFocus}
          className={classes.textField}
          value={value}
          inputRef={ref}
          InputProps={{
            classes: {
              input: classes.input,
            },
            ...other,
          }}
      />
  );
}

function renderSuggestion(suggestion, { query, isHighlighted }) {
  const matches = match(suggestion.description, query);
  const parts = parse(suggestion.description, matches);

  return (
      <MenuItem selected={isHighlighted} component="div">
        <div>
          {parts.map((part, index) => {
            return part.highlight ? (
                <span key={String(index)} style={{ fontWeight: 300 }}>
              {part.text}
            </span>
            ) : (
                <strong key={String(index)} style={{ fontWeight: 500 }}>
                  {part.text}
                </strong>
            );
          })}
        </div>
      </MenuItem>
  );
}

function renderSuggestionsContainer(options) {
  const { containerProps, children } = options;

  return (
      <Paper {...containerProps} square>
        {children}
      </Paper>
  );
}

function getSuggestionValue(suggestion) {
  return suggestion.description;
}

const styles = theme => ({
  container: {
    flexGrow: 1,
    position: 'relative',
    height: 200,
  },
  suggestionsContainerOpen: {
    position: 'absolute',
    marginTop: theme.spacing.unit,
    marginBottom: theme.spacing.unit * 3,
    left: 0,
    right: 0,
  },
  suggestion: {
    display: 'block',
  },
  suggestionsList: {
    margin: 0,
    padding: 0,
    listStyleType: 'none',
  },
  textField: {
    width: '100%',
  },
});

class GMapsAutocomplete extends React.Component {

  constructor(props) {
    super(props);
    this.autocompleteService = new google.maps.places.AutocompleteService();
    this.state = {
      value: props.selectedValue ? props.selectedValue : '',
      suggestions: []
    };
  }

  updateDataSource = (data) => {
    if (!data || !data.length) {
      return false;
    }

    if (this.state.suggestions) {
      this.previousData = { ...this.state.suggestions };
    }
    this.setState({
      suggestions: data
    });
  };

  getBounds = () => {
    if (!this.props.bounds || (!this.props.bounds.ne && !this.props.bounds.south)) {
      return undefined;
    }

    if (this.props.bounds.ne && this.props.bounds.sw) {
      return new google.maps.LatLngBounds(this.props.bounds.sw, this.props.bounds.ne);
    }

    return {
      ...this.props.bounds
    };
  };

  getSuggestions = (searchText) => {
    if (!searchText.length || !this.autocompleteService) {
      return false;
    }

    let request = {
      input: searchText,
      location: new google.maps.LatLng(this.props.location.lat, this.props.location.lng),
      radius: this.props.radius,
      types: this.props.types,
      bounds: this.getBounds()
    };

    if (this.props.restrictions) {
      request.componentRestrictions = { ...this.props.restrictions };
    }

    this.autocompleteService.getPlacePredictions(request, data => this.updateDataSource(data));
  }

  handleSuggestionsFetchRequested = ({ value }) => {
    this.getSuggestions(value);
  };

  handleSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };

  handleChange = (event, { newValue }) => {
    this.setState({
      value: newValue,
    });
  };

  handleSuggestionSelected = (event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) => {
    console.log(suggestionValue);
    this.props.onSuggestionSelected(suggestion, suggestionValue);
  }

  render() {
    const { classes, placeholder } = this.props;

    return (
        <Autosuggest
            theme={{
              container: classes.container,
              suggestionsContainerOpen: classes.suggestionsContainerOpen,
              suggestionsList: classes.suggestionsList,
              suggestion: classes.suggestion,
            }}
            renderInputComponent={renderInput}
            suggestions={this.state.suggestions}
            onSuggestionsFetchRequested={this.handleSuggestionsFetchRequested}
            onSuggestionsClearRequested={this.handleSuggestionsClearRequested}
            renderSuggestionsContainer={renderSuggestionsContainer}
            getSuggestionValue={getSuggestionValue}
            renderSuggestion={renderSuggestion}
            onSuggestionSelected={this.handleSuggestionSelected}
            inputProps={{
              autoFocus: true,
              classes,
              placeholder: placeholder,
              value: this.state.value,
              onChange: this.handleChange,
            }}
        />
    );
  }
}

GMapsAutocomplete.propTypes = {
  classes: PropTypes.object.isRequired,
  placeholder: PropTypes.string.isRequired,
  selectedValue: PropTypes.string,
  onSuggestionSelected: PropTypes.func,
  //Google maps parameters,
  location: PropTypes.object,
  radius: PropTypes.number,
  restrictions: PropTypes.shape({
    country: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.arrayOf(PropTypes.string)
    ])
  })
};

GMapsAutocomplete.defaultProps = {
  location: {lat: 0, lng: 0},
  radius: 0
};

export default withStyles(styles)(GMapsAutocomplete);

Cannot read property 'getLayer' of undefined

modules.js:159259 Uncaught TypeError: Cannot read property 'getLayer' of undefined

<GooglePlaceAutocomplete
  onNewRequest={(selectedData, searchedText, selectedDataIndex) => console.log(selectedData)}
  name={'location'}
  floatingLabelText='location'
  style={styles.fieldStyle}
/>

Also getting the following two:

modules.js:159235 Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

and

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Cannot read property 'noFilter' of undefined

Hey! I was trying to use this component but I'm getting:
Uncaught TypeError: Cannot read property 'noFilter' of undefined

"material-ui": "1.0.0-beta.47"
"material-ui-places": "^1.1.7"
"react": "16.2.0"

Server side rendering: google is not defined

Hi,
Your npm works great running locally, but using SSR with node I get the following error:

ReferenceError: google is not defined
at new t (C:\tripnew\node_modules\material-ui-places\lib\material-ui-places.min.js:1:2370)

any change to fix this?

Thanks a lot!

How can I use this component with redux-form Field?

I'd like to use this component inside redux-form Field, but I cannot make it working properly(
Could you please help me?

How to get Lat and Lng

Not able to figure out how I can extract Lat and Lng, didn't see in the object of NewRequest call.

Adding types prop results in react warning

<GooglePlaceAutocomplete types={['geocode']} />

This results in the following error:
Warning: Unknown prop types on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

How do you use this?

whats with on change and onNewRequest? Can you provide a much better getting started?

repo not working anymore, related to material-ui update?

Hi, I have just upgraded my material-ui library to 0.17.4, but now my dropdown menu is not showing anymore for my googlePlacesAutocomplete component (tested on localhost).

Could this be related to the material-ui update? Of have changes been made by google so that it doesn't run from localhost anymore?

Add example link

Hey @ydeshayes, great work! It'd be awesome if you build an example and show it so that we can get an idea of how it is like before using it.