Ionic (or AngularJS) blocks google maps autocomplete

Issue

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 !

Solution

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

Answered By - Vadim Gremyachev