在Angular Material中添加ui-gmap搜索框

angular.module("search-box-example", ['uiGmapgoogle-maps', 'ngRoute', 'ngMaterial'])

  .config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) {
    GoogleMapApi.configure({
      //key: '--Place key here--',
      libraries: 'places'
    });
  }])



  .controller("SearchBoxController", ['$scope', 'uiGmapLogger', '$http', 'uiGmapGoogleMapApi', 'uiGmapIsReady'
    , function ($scope, $log, $http, GoogleMapApi, uiGmapIsReady) {



      uiGmapIsReady.promise()
        .then(function (instances) {
          var map = instances[0].map;

          //init search control
          var searchInput = document.getElementById('pac-input');
          var searchBox = new google.maps.places.SearchBox(searchInput);
          var searchDiv = document.getElementById('searchContainer');
          map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchDiv);
          searchBox.addListener('places_changed', function () {
            var places = searchBox.getPlaces();
            if (places.length == 0) {
              return;
            }
            $scope.displayPlaces(places);
          });
        });


      $scope.displayPlaces = function (places) {

        // Clear out the old markers.
        $scope.map.markers = [];

        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function (place) {
          if (!place.geometry) {
            console.log("Returned place contains no geometry");
            return;
          }
       

          // Create a marker for each place.
          $scope.map.markers.push({
            "id": 1, //place.id,
            "coords": {
              "latitude": place.geometry.location.lat(),
              "longitude": place.geometry.location.lng(),
            },
            "name": place.name,
            "address": place.formatted_address
          });

          if (place.geometry.viewport) {
            // Only geocodes have viewport.
            bounds.union(place.geometry.viewport);
          } else {
            bounds.extend(place.geometry.location);
          }



        });

        $scope.map.control.getGMap().fitBounds(bounds);
      };




      $scope.map = {
        control: {},
        center: {
          latitude: 55.755826,
          longitude: 37.6173
        },
        zoom: 8,
        dragging: false,
        markers: [
           
        ],
        events: {}
      };


    }]);

.angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
}


md-input-container {
    background-color: white;
    
}

md-input-container.md-icon-left {
    padding-right: 36px !important;
}

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" ; rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/angular/bower-material/master/angular-material.css">

    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.0.1/lodash.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script>
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script>
    <script src="http://rawgit.com/angular-ui/angular-google-maps/2.3.2/dist/angular-google-maps.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-route.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-aria.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-animate.min.js"></script>
    <script type="text/javascript" src="http://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="search-box-example" ng-controller="SearchBoxController">

    <div id="searchContainer">
        <md-input-container class="md-icon-float md-block">
            <label>Address</label>
            <md-icon md-font-set="material-icons">home</md-icon>
            <input id="pac-input" placeholder="Address">
        </md-input-container>
    </div>

    <div>
        <ui-gmap-google-map center="map.center" zoom="map.zoom" dragging="map.dragging" events="map.events" options="map.options"
            pan="true" control="map.control">

             <ui-gmap-markers  models="map.markers" coords="'coords'" ></ui-gmap-markers>

        </ui-gmap-google-map>

    </div>

</div>