Google Autocomplete for Addresses and Search Terms Polymer element - polymer

Question

I was searching for google autocomplete search for address polymer element but i was not able to find that so i decided to write of my own.
But I get google.maps as object but google.maps.places is undefined in the console below is my sample code
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<polymer-element name="google-placesearch">
<link rel="import" href="../../bower_components/polymer/polymer.html">
<template>
<style>
</style>
<input id="autocomplete" placeholder="Enter your address"
type="text"></input>
</template>
<script>
Polymer('google-placesearch', {
ready: function() {
// this.autocomplete= new google.maps.places.Autocomplete(this.$.autocomplete)
console.log(this.$.autocomplete);
autocomplete=new google.maps.places.Autocomplete(this.$.autocomplete);
// console.log(autocomplete);
},
});
</script>
</polymer-element>

Answer 1

There's a google-map-search element here, although it doesn't appear to use the google.maps.places.Autocomplete API.
You'll also want to load the google maps library like this: https://github.com/GoogleWebComponents/google-map/blob/master/google-map-directions.html#L44. Note, there's a google-maps-api component for loading the library and getting the timing right.

Answer 2

I created my own google-location-search element using maps api
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/google-apis/google-maps-api.html">
<polymer-element name="google-place-search" attributes="location" >
<template>
<style>
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555555;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
</style>
<google-maps-api apiKey="{{apiKey}}" version="{{version}}" on-api-load="{{mapApiLoaded}}" libraries="{{libraries}}"></google-maps-api>
<input id="autocomplete" placeholder="Enter your address first time"
type="text" class="form-control"></input>
</template>
<script>
Polymer('google-place-search', {
autocomplete:null,
version: '3.exp',
apiKey: null,
libraries: "places",
mapApiLoaded: function() {
this.autocomplete= new google.maps.places.Autocomplete(this.$.autocomplete);
google.maps.event.addListener(this.autocomplete, 'place_changed', function() {
var place = this.autocomplete.getPlace();
this.location=place.formatted_address
}.bind(this));
}
});
</script>
</polymer-element>