Laurent Meyer Laurent Meyer - 1 year ago 208
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

is not rendered as expected.

enter image description here

Here is my code:

<md-input-container class="md-icon-float md-block">
<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="$error" role="alert">
<div ng-message="minlength">Bitte vollständigen Telefonnummer angeben.</div>
<div ng-message="required">Bitte ein Telefonnummer angeben.</div>

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

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

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


  • Did I miss something?

  • Is there a way to trigger
    Angular Material

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

Answer Source

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) {
      //key: '--Place key here--',
      libraries: 'places'

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

        .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');
          searchBox.addListener('places_changed', function () {
            var places = searchBox.getPlaces();
            if (places.length == 0) {

      $scope.displayPlaces = function (places) {

        // Clear out the old 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");

          // Create a marker for each place.
            "id": 1, //,
            "coords": {
              "longitude": place.geometry.location.lng(),
            "address": place.formatted_address

          if (place.geometry.viewport) {
            // Only geocodes have viewport.
          } else {



      $ = {
        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;
} {
    padding-right: 36px !important;
 <link href="" ; rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="">

    <script src="//" type="text/javascript"></script>
    <script src="//"></script>
    <script src=""></script>
    <script src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
<div ng-app="search-box-example" ng-controller="SearchBoxController">

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

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

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




Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download