What's with Google Places API and routing?

ionic-v1
1

Sorry, a little new here.
I am simply trying to get Google Places Autocomplete search bar in my Ionic app. When I create a blank app, it works without problem.

When I create a new tabs project, however, it does not work. I have my function inside of a HTML template, and I’ve tried putting the script tag that grabs the api both in the of the index page and inside the template where the function is. Neither work for me. I think the routing has something to do with it.

I am not sure if the function should be inside a controller or not. Only certain functions go inside controllers, functions that deal with $scope??? Can somebody help clear this up too?

2

can u provide codepen

3

When I type it out in codepen, it works fine. I think this is because the api script and the function are on the same page. I think the problem is with the routing. When Ionic/Angular injects “html/tabs-locheck.html” into the index.html (even if the api script is inside tabs-locheck.html), the api link breaks?

<head>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/services.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
</head>
  <body ng-app="tabs">
  <ion-view view-title="Location Check">
  <ion-content padding="true" class="bck4">
<div>
  <label for="locationTextField">If not, please type in your new location</label>
  <input id="locationTextField" type="text" size="50">
  <script>
  function init() {
  var input = document.getElementById('locationTextField');
  var autocomplete = new google.maps.places.Autocomplete(input);
  }
  google.maps.event.addDomListener(window, 'load', init);
  </script>
</div>
  </ion-content>
</ion-view>

(The codepen only needs the HTML and it works)

4

try this directive

5

I can’t seem to get it to work. I’ll keep trying, but I don’t think this was made for Ionic. UI Router might still be breaking it

6

so call the init function from the controller after the app/device is ready

or just write a new component/directive for the autocomplete but don’t use label element

7

I’ve tried this and nothing. I tried different onload’s and onclick’s, different window.onload inside the controller and everything. Still struggling. Please helpppppp…