Ionic (or AngularJS) blocks google maps autocomplete - angularjs

Question

I'm just trying to add a simple autocomplete form to my Ionic app.
So first I tried this, it works fine.
I then tried in my app (in the browser first).
I put this in my controller, and called it with ng-init="initMaps()"
$scope.initMaps = function() {
var center = new google.maps.LatLng(51.514032, -0.128383);
var circle = new google.maps.Circle({
center: center,
radius: 50
});
var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
var input = document.getElementById('autocomplete');
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.setBounds(circle.getBounds());
console.log("maps loaded")
}
When I look at my console, I can see "maps loaded", and google warnings like:
Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
I just added this line in my template form:
<input id="autocomplete" type="text" style="width: 200px;">
So, I think on a non-ionic (or angular) project it would work fine. But here, when I enter some letters, I don't get any result
Does Angular/Ionic create some interference here ? Am I forced to install other modules ?
Thanks !

Answer 1

Since Place Autocomplete is a part of Google Maps Places Library you probably forgot to include the loading of this library via libraries parameter, for example:
<script src="//maps.googleapis.com/maps/api/js?key={KEY}&libraries=places"></script>
Example
angular.module('ionic.example', ['ionic'])
.controller('MapCtrl', function ($scope) {
$scope.initMap = function () {
var center = new google.maps.LatLng(51.514032, -0.128383);
var circle = new google.maps.Circle({
center: center,
radius: 50
});
var options = { componentRestrictions: { country: 'uk' }, types: ['geocode'] }
var input = document.getElementById('autocomplete');
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.setBounds(circle.getBounds());
}
google.maps.event.addDomListener(window, 'load', $scope.initMap);
});
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
<script src="//maps.googleapis.com/maps/api/js?libraries=places"></script>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div ng-app="ionic.example" ng-controller="MapCtrl">
<ion-header-bar class="bar-dark" >
<h1 class="title">Map</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
<input id="autocomplete" placeholder="Enter your address" class="controls" type="text"></input>
</ion-content>
</div>
Codepen