Google Maps Doesn't show

ionic-v1
1

Hello,
I need help because I’m using Gmaps with Ionic but it doesn’t show. I got the following code:
controller.js

.controller('MapController', function($scope,$ionicLoading ,$ionicLoading ){
  console.log('Entro');

  $scope.initialise = function(){
   console.log('In Google.maps.event.addDomListener');
   var myLatlng= new google.maps.LatLng(37.3000, -120.4833);
   var mapOptions= {
    center: myLatlng,
    zoom:16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
   };

     console.log(mapOptions);

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

  navigator.geolocation.getCurrentPosition(function(pos){
      console.log(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:'Mi ubicacion'
      });
      console.log(myLocation);
     });
$scope.map=map;

  };

google.maps.event.addDomListener(document.getElementById("map"),'load',$scope.initialise());
})

Template Mapa.html:

<ion-view view-title="Mapa">
  <ion-content>
    <!-- <h1>Mapa</h1> -->
<!--     <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBAH8Qov5oy9GaufE9h2Go4X0P58kK0eUE&sensor=true"></script>-->
    <ion-content ng-controller="MapController">
        <div id="map" data-tap-disabled="true"></div>
    </ion-content>
  
  </ion-content>
</ion-view>

There is no error in the console,
Any idea.

2

your console.logs are printed in the console?
Could you investigate if the div#map has any content?

If so maybe you have to set a fixed height and width for the container.

3

Is it working in a browser?

If you have a problem running it with Cordova (version 5 +) then do this:

You need to install the cordova-plugin-whitelist as following:

cordova plugin add cordova-plugin-whitelist

Finally add the following to your index.html:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' *; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *">

Read more about it here: http://www.gajotres.net/whitelist-external-resources-and-api-calls-ionic-framework/