{"action":"created","issue":{"url":"https://api.github.com/repos/callemall/material-ui/issues/5235","repository_url":"https://api.github.com/repos/callemall/material-ui","labels_url":"https://api.github.com/repos/callemall/material-ui/issues/5235/labels{/name}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/5235/comments","events_url":"https://api.github.com/repos/callemall/material-ui/issues/5235/events","html_url":"https://github.com/callemall/material-ui/issues/5235","id":178665583,"number":5235,"title":"{Example][TextField] geolocator autocomplete","user":{"login":"Sharlaan","id":2692027,"avatar_url":"https://avatars.githubusercontent.com/u/2692027?v=3","gravatar_id":"","url":"https://api.github.com/users/Sharlaan","html_url":"https://github.com/Sharlaan","followers_url":"https://api.github.com/users/Sharlaan/followers","following_url":"https://api.github.com/users/Sharlaan/following{/other_user}","gists_url":"https://api.github.com/users/Sharlaan/gists{/gist_id}","starred_url":"https://api.github.com/users/Sharlaan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Sharlaan/subscriptions","organizations_url":"https://api.github.com/users/Sharlaan/orgs","repos_url":"https://api.github.com/users/Sharlaan/repos","events_url":"https://api.github.com/users/Sharlaan/events{/privacy}","received_events_url":"https://api.github.com/users/Sharlaan/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/callemall/material-ui/labels/Docs","name":"Docs","color":"fbca04"}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-09-22T16:58:51Z","updated_at":"2016-10-02T18:07:53Z","closed_at":"2016-10-02T18:07:53Z","body":"### Description\r\nSince i didnot find any material-styled geoAutocomplete component on the web, i made my own based on Material-UI's TextField, and thought would be nice to share it here.\r\nCurrently it only displays addresses and can be used to autofill zipcode and city fields on same form. There is room for enhancements like exposing the google.maps.places.Autocomplete options...\r\n\r\n### Images & references\r\n![geoautocompletetextfield](https://cloud.githubusercontent.com/assets/2692027/18756587/c4c1729e-80f0-11e6-8437-1f4fec6ae770.png)\r\n\r\n### Important\r\nYou must include in site root (usually index.html) [your own Google Place API key](https://developers.google.com/places/web-service/get-api-key?hl=en):\r\n```\r\n<script type='text/javascript' src={`https://maps.googleapis.com/maps/api/js?key=${googlePlacesApiKey}&libraries=places`}></script>\r\n```\r\n### Implementation\r\n```js\r\nimport React, { Component, PropTypes } from 'react'\r\nimport { TextField } from 'material-ui'\r\n\r\nexport default class AddressAutocomplete extends Component {\r\n  static propTypes = {\r\n    value: PropTypes.string,\r\n    floatingLabelText: PropTypes.string,\r\n    hintText: PropTypes.string,\r\n    onChange: PropTypes.func\r\n  }\r\n\r\n  componentWillMount () {\r\n    this.setState({ value: this.props.value || '' })\r\n  }\r\n\r\n  componentDidMount () {\r\n    const input = document.getElementById('addressAutocompleteField')\r\n    const options = {\r\n      componentRestrictions: {country: 'fr'},\r\n      types: ['address']\r\n    }\r\n    const geoAutocomplete = new window.google.maps.places.Autocomplete((input), options)\r\n    geoAutocomplete.addListener('place_changed', () => {\r\n      const selectedPlace = geoAutocomplete.getPlace()\r\n      const componentForm = {\r\n        street_number: 'short_name',\r\n        route: 'long_name',\r\n        locality: 'long_name',\r\n        administrative_area_level_1: 'short_name',\r\n        country: 'long_name',\r\n        postal_code: 'short_name'\r\n      }\r\n      // Get each component of the address from the place details\r\n      // and fill the corresponding field on the form.\r\n      let selectedSuggest = {}\r\n      for (let addressComponent of selectedPlace.address_components) {\r\n        const addressType = addressComponent.types[0]\r\n        if (componentForm[addressType]) {\r\n          selectedSuggest[addressType] = addressComponent[componentForm[addressType]]\r\n        }\r\n      }\r\n      // input.value = selectedPlace.name // Code injection risk (check doc)\r\n      input.value = `${selectedSuggest.street_number}, ${selectedSuggest.route}`\r\n      this.props.onChange(selectedSuggest)\r\n    })\r\n  }\r\n\r\n  _handleChange = (event, value) => this.setState({ value })\r\n\r\n  render () {\r\n    return (\r\n      <TextField\r\n        id='addressAutocompleteField'\r\n        floatingLabelText={this.props.floatingLabelText}\r\n        hintText={this.props.hintText}\r\n        value={this.state.value}\r\n        onChange={this._handleChange}\r\n        placeholder=''\r\n        fullWidth\r\n      />\r\n    )\r\n  }\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/callemall/material-ui/issues/comments/250985526","html_url":"https://github.com/callemall/material-ui/issues/5235#issuecomment-250985526","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/5235","id":250985526,"user":{"login":"oliviertassinari","id":3165635,"avatar_url":"https://avatars.githubusercontent.com/u/3165635?v=3","gravatar_id":"","url":"https://api.github.com/users/oliviertassinari","html_url":"https://github.com/oliviertassinari","followers_url":"https://api.github.com/users/oliviertassinari/followers","following_url":"https://api.github.com/users/oliviertassinari/following{/other_user}","gists_url":"https://api.github.com/users/oliviertassinari/gists{/gist_id}","starred_url":"https://api.github.com/users/oliviertassinari/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oliviertassinari/subscriptions","organizations_url":"https://api.github.com/users/oliviertassinari/orgs","repos_url":"https://api.github.com/users/oliviertassinari/repos","events_url":"https://api.github.com/users/oliviertassinari/events{/privacy}","received_events_url":"https://api.github.com/users/oliviertassinari/received_events","type":"User","site_admin":false},"created_at":"2016-10-02T18:07:53Z","updated_at":"2016-10-02T18:07:53Z","body":"> Since i didnot find any material-styled geoAutocomplete component on the web, i made my own based on Material-UI's TextField, and thought would be nice to share it here\r\n\r\nInteresting, thanks for sharing.\r\nHowever, it would be more effective to create a repository (E.g. [material-ui-password-field](https://github.com/TeamWertarbyte/material-ui-password-field)) rather than an issue.\r\nWe could add a link to it in the *Related Project* section of the documentation."}}
{"actor":{"display_login":"oliviertassinari"}}