Google is not defined

ionic-v1
1

I am following the steps of making ion-google-place here at https://github.com/israelidanny/ion-google-place but as I go deeper I face error; Google is not defined… how can I fix this? thanks…

2

like you see it is based on google maps → so you need to include the google lib on your own with your own api key.

For the geolocation service to work, you’ll need to have Google Maps javascript API somewhere in your HEAD tag: <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

3

I do have <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> in my head tag

4

before ionic and your code?

5

here is my index.html

<!DOCTYPE html>
<html ng-app="starter">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <!--<link href="lib/ionic-ion-drawer/ionic.contrib.drawer.css" rel="stylesheet">-->
    <link href="lib/ion-floating-menu/dist/ion-floating-menu.css" rel="stylesheet" type="text/css"/>
    <link href="lib/ion-md-input/css/ion-md-input.css" rel="stylesheet"/>
    <link href="lib/ion-google-place/ion-google-place.css" rel="stylesheet">
    <link href="lib/nifty.modal.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <script src="js/platformOverrides.js"></script>

    <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!--<script src="lib/ionic-ion-drawer/ionic.contrib.drawer.js"></script>-->

    <script src="lib/ion-floating-menu/dist/ion-floating-menu.js" type="text/javascript"></script>

    <script src="lib/ionic-wizard/dist/ion-wizard.js"></script>

    <script src="lib/ion-md-input/js/ion-md-input.js"></script>

    <script src="lib/ion-google-place/ion-google-place.js"></script>
    
    <script src="lib/ionic-image-lazy-load/ionic-image-lazy-load.js"></script>

    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

    <!-- moment -->
    <script src="lib/moment/moment.min.js"></script>

    <!-- angular moment -->
    <script src="lib/angular-moment/angular-moment.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body>
      <!-- <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar> -->
      <ion-nav-view animation="slide-left-right"></ion-nav-view>

  </body>

</html>

even if i place the script anywhere still error shows

6

even if I use this https://github.com/ivanthecrazy/ion-place-autocomplete still google is undefined… I don’t know where I mess up my code…