Laurent Meyer Laurent Meyer - 2 months ago 52
AngularJS Question

Add a ui-gmap-search-box in Angular Material

I'm putting Angular Material in my old Angular Project and I'm having one problem: the

ui-gmap-search-box
is not rendered as expected.

enter image description here

Here is my code:

<md-input-container class="md-icon-float md-block">
<label>Telefonnummer</label>
<md-icon md-font-set="material-icons">phone</md-icon>
<input ng-model="controller.user.phoneNumber" type="number" name="phone" ng-minlength="8" required>
<div ng-messages="signupForm.phone.$error" role="alert">
<div ng-message="minlength">Bitte vollständigen Telefonnummer angeben.</div>
<div ng-message="required">Bitte ein Telefonnummer angeben.</div>
</div>
</md-input-container>

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


<ui-gmap-google-map class="smallMap col-xs-12" center='controller.map.center' zoom='controller.map.zoom'>-->
<ui-gmap-search-box parentdiv="'searchContainer'" template="controller.searchbox.template"
events="controller.searchbox.events"
ng-model="controller.user.address.postalAddress"></ui-gmap-search-box>
<ui-gmap-marker coords="controller.marker.coords" options="controller.marker.options"
events="controller.marker.events" idkey="controller.marker.id"></ui-gmap-marker>
</ui-gmap-google-map>


I guess that I understand why the bug happens: the text field for the address is added by
Angular Maps
and
Angular Material
is, at that point, done with the rendering of the view -> the text field appears as a plain text field.

Question:


  • Did I miss something?

  • Is there a way to trigger
    Angular Material
    rendering?

  • Is there an event called when
    Angular Maps
    created the text field?


Answer

It seems there is no straightforward way to customize a search box via ui-gmap-search-box directive for that scenario. Instead i would suggest to accomplish it as demonstrated below:

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>