CODEWITHSUNDEEP
javascriptandroidcordovagoogle-mapsgoogle-maps-api-3
Bill Noble
Bill Noble

Reputation: 6744

Getting a 'google is not defined' error when trying to use google.maps.geocoder in Android app

I have an ionic cordova Android app where I am trying to use the Google maps API. Specifically I want to use the geocoder feature. In my Cordova Android app code I have a line of code to get access to the geocoder:

var geocoder = new google.maps.Geocoder();

This line of code is in the ''file and is throwing an error: 'ReferenceError google is not defined'.

I am adding the google maps api in the index.html file as follows:

<!DOCTYPE html>
<html ng-csp="">
  <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 *;
               script-src 'self' 'unsafe-inline' 'unsafe-eval'
                           127.0.0.1:*
                           http://192.168.1.254
                           maps.googleapis.com
                           autolinkmaker.itune.apple.com
                           http://*.itunes.apple.com
                           http://*.googleapis.com
                           http://*.maxplatform.com
                           https://*.itunes.apple.com
                           https://*.googleapis.com
                           https://*.maxplatform.com
                           ;
               style-src  'self' 'unsafe-inline'
                           127.0.0.1:*
                           http://192.168.1.254
                           maps.googleapis.com
                           autolinkmaker.itune.apple.com
                           http://*.itunes.apple.com
                           http://*.googleapis.com
                           http://*.maxplatform.com
                           https://*.itunes.apple.com
                           https://*.googleapis.com
                           https://*.maxplatform.com
    ">

    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Open%20Sans%3A300%2C600%2C700" rel="stylesheet" type="text/css">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

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


    <script src="js/app.js"></script> 
    <script src="js/controllers/appctrl.js"></script> 
    <script src="js/controllers/sharectrl.js"></script>
    <script src="js/controllers/homectrl.js"></script>
    <script src="js/controllers/tourctrl.js"></script>
    <script src="js/controllers/newsctrl.js"></script>
    <script src="js/controllers/friendsctrl.js"></script>
    <script src="js/controllers/discoverctrl.js"></script>
    <script src="js/controllers/watchlistctrl.js"></script>
    <script src="js/controllers/trailerctrl.js"></script>
    <script src="js/controllers/settingsctrl.js"></script>

    <script src="lib/angular-base64/angular-base64.min.js"></script>
    <script src="lib/angular-resource/angular-resource.min.js"></script>
    <script src="lib/angular-animate/angular-animate.min.js"></script>
    <script src="lib/angular-messages/angular-messages.min.js"></script>
    <script src="lib/ionic-rating/ionic-rating.min.js"></script>
    <script src="lib/ion-google-place/ion-google-place.js"></script>

    <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

  </head>

  <body ng-app="cuesApp" ng-cloak="">
    <ion-nav-view>
    </ion-nav-view>
  </body>
</html>

I can't see why google is undefined?

Upvotes: 1

Views: 4182

Answers (2)

Magnus Melwin
Magnus Melwin

Reputation: 1517

Look for the meta security tag. and debug the ionic app using chrome://inspect/#devices in the chrome browser. You will notice the meta security errors.

Upvotes: 0

Felipe Brahm
Felipe Brahm

Reputation: 3160

You are loading the Google Maps API after all your other scripts, so when you try to use google.maps it doesn't exist yet.

Move <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> to the top to fix it.

Upvotes: 2

Related Questions