Uncaught TypeError: b.get is not a function

Question

While implementing AutoComplete places using google maps api, when i try to enter any places a bunch of errors are generated at the chrome console window. One of them is Uncaught TypeError: b.get is not a function at Ew._.k.get (js?key=[KEY]&libraries=places&callback=initMap:106).

Code:

<!-- Google Maps API integration-->
<div class="gmaps">
    <div id="map"></div>
    <script>
      function initMap() {
      <!-- getting the user location -->
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(success);
      } else {
          alert('geolocation not supported');
      }
      <!-- if successfully found the location -->
      function success(position) {

          var uluru = {lat:position.coords.latitude, lng: position.coords.longitude};
          var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 15,
              center: uluru
            });

          var marker = new google.maps.Marker({
              position: uluru,
              map: map
           });
      }      
      var acOptions = {
            types: ['establishment']
        };
        var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'),acOptions);
        autocomplete.bindTo('bounds',map);

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            infoWindow.close();
            var place = autocomplete.getPlace();
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }
            marker.setPosition(place.geometry.location);
            infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
            infoWindow.open(map, marker);
            google.maps.event.addListener(marker,'click',function(e){

                infoWindow.open(map, marker);

            });
        });
    }
    </script>
</div>

Answer 1

The problem is this line:

autocomplete.bindTo('bounds', map);

When that code first runs, the map hasn't finished initializing and its bounds aren't valid. Put that code inside a bounds_changed event listener:

google.maps.event.addListener(map,'bounds_changed', function() {
  autocomplete.bindTo(map, 'bounds');
});

proof of concept fiddle

code snippet:

var infoWindow;
var map;

function initMap() {
  <!-- getting the user location -->
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, errorFunc);
  } else {
    alert('geolocation not supported');
  }

  function errorFunc(posErr) {
    console.log("Position Error code:" + posErr.code + " msg:" + posErr.message);
  }
  <!-- if successfully found the location -->
  function success(position) {
    infoWindow = new google.maps.InfoWindow();
    var uluru = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: uluru
    });

    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
  var acOptions = {
    types: ['establishment']
  };
  var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), acOptions);
  google.maps.event.addListener(map, 'bounds_changed', function() {
    autocomplete.bindTo(map, 'bounds');
  });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infoWindow.close();
    var place = autocomplete.getPlace();
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }
    marker.setPosition(place.geometry.location);
    infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
    infoWindow.open(map, marker);
    google.maps.event.addListener(marker, 'click', function(e) {

      infoWindow.open(map, marker);

    });
  });
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map,
.gmaps {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<input type="text" id="autocomplete" />
<!-- Google Maps API integration-->
<div class="gmaps">
  <div id="map"></div>
</div>