title: google maps with ionic
body: <p>Im trying to implement a map using google maps with Ionic. I followed the coding in this <a href="http://codepen.io/ionic/pen/uzngt">Link</a>
  But all i get is a blank screen dont know where i went wrong. Please help</p>
  
  <p>This is the controller  </p>
  
  <pre><code>angular.module('starter', ['ionic'])
  
  .controller('MapCtrl', 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);
  
      //Marker + infowindow + angularjs compiled ng-click
      var contentString = "&lt;div&gt;&lt;a ng-click='clickTest()'&gt;Click me!&lt;/a&gt;&lt;/div&gt;";
      var compiled = $compile(contentString)($scope);
  
      var infowindow = new google.maps.InfoWindow({
        content: compiled[0]
      });
  
      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Uluru (Ayers Rock)'
      });
  
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
      });
  
      $scope.map = map;
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  
    $scope.centerOnMe = function() {
      if(!$scope.map) {
        return;
      }
  
      $scope.loading = $ionicLoading.show({
        content: 'Getting current location...',
        showBackdrop: false
      });
  
      navigator.geolocation.getCurrentPosition(function(pos) {
        $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        $scope.loading.hide();
      }, function(error) {
        alert('Unable to get location: ' + error.message);
      });
    };
  
    $scope.clickTest = function() {
      alert('Example of infowindow with ng-click')
    };
  
  });
  </code></pre>
  
  <p>This is the html file  </p>
  
  <pre><code> &lt;script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&amp;sensor=true"&gt;&lt;/script&gt;
  
  
  &lt;body ng-controller="MapCtrl"&gt;
  &lt;ion-header-bar class="bar-dark" &gt;
    &lt;h1 class="title"&gt;Map&lt;/h1&gt;
  &lt;/ion-header-bar&gt;
  &lt;ion-content&gt;
  
    &lt;div id="map" data-tap-disabled="true"&gt;&lt;/div&gt;
  &lt;/ion-content&gt;
  &lt;ion-footer-bar class="bar-dark"&gt;
    &lt;a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"&gt;Find Me&lt;/a&gt;
  &lt;/ion-footer-bar&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>please help.</p>