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!

Answer 2

Yes I think you are onto something. The google auto-completion has it's own DOMrendered on the top (or bottom? sorry I cant remenber) of the document and event handlers binding to them.

The easy way out is overwrite the css rules to meet your requirements. But if that doesn't workout, you can always use google geocode API

https://developers.google.com/maps/documentation/geocoding/ to work with Material design md-autocomplete directive. You get flexibility to work with just json format geo data from restful API and do whatever you want with it., But the trade off is you lose some capability (e.g. you cannot sort the match based on your current place, you have to use region or city to manually restrict them).