Ionic + Google Maps: ReferenceError: google is not defined

ionic-v1
6

Ok I checked your code and I found issue.

  1. go to your project and do “ionic plugin add cordova-plugin-whitelist”

  2. add meta e.g.

     <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'">
  1. Head tag should looks like:
 <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="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'">
    <title></title>

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

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
   
   <!-- your app's js -->
    <script src="js/app.js"></script>    

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script> 
  </head>
  1. your css like that:
/* Empty. Add your own CSS if you like */
.map {
  height: 100%;
  width: 100%;
}

.scroll {
  height: 100%;
}

.labels {
 color: black;
 
 font-family: "Lucida Grande", "Arial", sans-serif;
 font-size: 20px;
 text-align: center;
 width: 80px;     
 white-space: nowrap;
}

Now you can plug device, check if is on the list: >adb devices, then, ionic run android

Its working.

5 Likes