Clever Geek Handbook

Polymer paper input with google autocomplete

Is it possible to plug in a paper input component using the Google AutoFill Places library ? I am trying to get the dropdown effect combined with paper input behavior

+3


source to share


2 answers


You can use the following code to get Google places. Auto-fill with resin paper input.

First you need to import google maps web components you can download google-maps element from https://googlewebcomponents.github.io/

<link rel="import" href="components/google-maps/google-maps.html">


Then you can use the following code. Call the initialization function on the onload page. When you enter any address in the input, autocomplete will be displayed, and when you select any item from autocomplete, a callback will be triggered.

<paper-input id="search"></paper-input>
<script>
var autocomplete;
function initialize()
{
  autocomplete = new google.maps.places.Autocomplete((document.getElementById('search')), {types:['geocode']});
  google.maps.event.addListener(autocomplete, 'place_changed', callBack);
}
function callback()
{
  var place = autocomplete.getPlace();
  //console.log(place.geometry.location.lat());
}
</script>

You can read more about how Google fills in autocomplete from https://developers.google.com/maps/documentation/javascript/places-autocomplete

+3


source


Someone already wrote the item here , just replace the input with paper input and add imports.



Also note that the "libraries" attribute must change in the same way on every google maps element.

+2


source






More articles:


All Articles