Google Maps autoComplete with material design

Question

I have a question about implementing Google Maps auto complete function in material design:

<md-autocomplete flex="" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-floating-label="Favorite state">
    <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
</md-autocomplete>

Angular Material autocomplete | Google Maps autocomplete

How can I use material design's auto complete in google maps auto complete (angular)?

Thanks in advance.

I've found this solution: i overwrite only the css proprties:

/*maps autocomplete*/
.pac-item{
    font-family:RobotoDraft,Roboto,'Helvetica Neue',sans-serif !important;
    font-weight: 300 !important;
    color: rgb(33,33,33) !important;
    line-height: 40px !important;
    /*font-weight: 800;*/
}

.pac-item-query{
    font-family:RobotoDraft,Roboto,'Helvetica Neue',sans-serif !important;
    font-size: 16px;
}

.pac-item:hover{
    background-color: #eeeeee !important;
    transition: background .15s linear;
}

.pac-container{
    color: rgb(33,33,33) !important;
    background-color: #fafafa;
    /*font-weight: 800;*/
}

.pac-icon, .pac-icon-marker{
    background: none !important;
    background-image: none !important;
}

Answer 1

We had the exact same requirement for our app, and we did manage to do it the "proper" way, so here you have the solution with the md-autocomplete directive (using Angular Material), taking advantage of the AutocompleteService API from Google.

View:

<md-autocomplete md-no-cache="true"
                 md-selected-item="vm.selectedItem"
                 md-search-text-change="vm.search(vm.searchText)"
                 md-search-text="vm.searchText"
                 md-items="item in vm.search(vm.searchText)"
                 md-item-text="item"
                 md-min-length="0"
                 placeholder="Type your address">
  <md-item-template>
    <span md-highlight-text="vm.searchText" md-highlight-flags="^i">{{item}}</span>
  </md-item-template>
  <md-not-found>
    No matches found for "{{vm.searchText}}".
  </md-not-found>
</md-autocomplete>

Controller:

vm.search = search;

function search(address) {
  var deferred = $q.defer();
  getResults(address).then(
    function (predictions) {
      var results = [];
      for (var i = 0, prediction; prediction = predictions[i]; i++) {
        results.push(prediction.description);
      }
      deferred.resolve(results);
    }
  );
 return deferred.promise;
}   

function getResults(address) {
  var deferred = $q.defer();
  vm.gmapsService.getQueryPredictions({input: address}, function (data) {
    deferred.resolve(data);
  });
  return deferred.promise;
}

Just remember to create the service on your controller activation:

vm.gmapsService = new google.maps.places.AutocompleteService();

And to add the javascript dependency on your main app file:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KE‌​Y&libraries=places"></script>

All the vm. stuff is because we use the John Papa Styleguide

Hope it works for you!