Dúvida sobre utilizar GoogleMaps

Estou tentando implementar um mapa na aplicação, porém não carrega nada no HTML. script no index

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIAoQjQyrnhScLJw60Y9cggfEPrJfuObA"></script>

Controller com o map

angular.module('starter')
.controller('VisualizarPepinoController', function($scope,$stateParams,$ionicLoading, $cordovaGeolocation){

    $scope.denunciaEscolhida = angular.fromJson($stateParams.denuncias);

  google.maps.event.addDomListener(window, 'load', function() {
        var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        navigator.geolocation.getCurrentPosition(function(pos) {
            map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            var myLocation = new google.maps.Marker({
                position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                map: map,
                title: "My Location"
            });
        });

        $scope.map = map;
    });

});

HTML

<ion-view>
    <ion-nav-title>Visualização da Denúncia</ion-nav-title>
    <ion-content ng-controller="VisualizarPepinoController">
          <div id="map" data-tap-disabled="true"></div>
    </ion-content>
  </ion-pane>
</ion-view>

OBS: Não dá nenhum erro no console, testei o mesmo código utilizando em uma aplicação web e funcionou normalmente, apenas no ionic não funcionava.