Google Maps Example doesn't display anything

ionic-v1
1

I followed [this][1] example on CodePen in order to get the Google Maps API to work. Sadly, it doesn’t display any map or response at all.

Since I’m using templates I slightly changed the example code a bit but I can’t figure out if this could really be a problem.

I won’t be posting everything, for example the tabs.html. Every other tab is working.

Here is what I tried (sorry for posting so much code):

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Ionic Maps</title>
    <link href="css/ionic.app.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- Google Maps -->
    <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCdZj-YgUNI3w8POjL4UYJWX2gPs80D8EE&sensor=true"></script>

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

<!-- own js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>

<body ng-app="bspApp">
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>

  <ion-nav-view></ion-nav-view>

</body>

</html>

geolocation.html

<ion-view view-title="Geolocation" ng-controller="GeolocationCtrl">
  <ion-content ng-class="{'has-header has-tabs-top': platform.isAndroid(),
                        'has-header': !platform.isAndroid() }">

    <ion-checkbox ng-model="GPSActivated.Status">
      GPS activated?
    </ion-checkbox>

    <div ng-show="GPSActivated.Status">
      <div id="map" data-tap-disabled="true"></div>
    </div>

</ion-content>

  <ion-footer-bar class="bar-dark">
    <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
  </ion-footer-bar>
</ion-view>

app.js

angular.module('bspApp', ['ionic', 'bspApp.controllers', 'ngCordova'])
// some .run and .config code that is not interesting

controllers.js

angular.module('bspApp.controllers', ['ionic'])
.controller('GeolocationCtrl', function($scope, $ionicLoading, $compile) {
  function initialize() {
  var myLatlng = new google.maps.LatLng(43.07493,-89.381388);

  var mapOptions = {
    center: myLatlng,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"),
    mapOptions);

//and so on - the whole code of the CodePen example

Any help on this is really appreciated - thank you!
[1]: http://codepen.io/ionic/pen/uzngt?editors=101

2

Where? It does on Codepen.

3

Yes, that’s exactly the problem. I think I nearly copied the code, except using templates in my case, but I don’t know why it isn’t showing me anything in my case.

Can you figure out a problem when looking at my code I posted above?

4

Why don’t you make your changes on Codepen, so it’s easier to see? Just fork the original pen.

5

It is the same in this YouTube page:
https://www.youtube.com/watch?v=LkNKoSO9X60
Which in ionic everything it works ok, but when you step apk my cell does not show me anything.

Regards,